Background Fade
Also called Color Fade
The background and text color cross-fade to a new color on hover.
Use for
Buttons, nav items
Variants
- Fade
- Back Pulse
Prompt
Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.
Add a "Background Fade" hover effect (also called color fade) to [where].
The background and text colors should cross-fade smoothly to new colors while the pointer is over the element, and fade back when it leaves: calm, with no movement.
Keep enough contrast between text and background in both states, and show the same effect on keyboard focus.