Border Fade
The border color fades in or changes on hover.
Use for
Buttons, inputs
Variants
- Border Fade
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 "Border Fade" hover effect to [where].
The border should fade smoothly from a muted tone to the accent color while the pointer is over the element: subtle, with no movement or size change.
Keep the border width the same in both states so nothing shifts, and show the same effect on keyboard focus.Similar motions
A
Hover to play
Background Fade
Also called Color Fade
The background and text color cross-fade to a new color on hover.
Use for
Buttons, nav items
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.A
Hover to play
An inner border line appears inside the element edge on hover.
Use for
Buttons, cards
Add a "Trim" hover effect to [where].
A thin line should fade in just inside the element's edge while the pointer is over it, and fade out when it leaves: subtle, with no movement.
Keep the line inside the element so its size doesn't change, and show the same effect on keyboard focus.A
Hover to play
An outline grows outward from or shrinks toward the element on hover.
Use for
Buttons
Add an "Outline Expand" hover effect to [where].
An outline should start flush with the element's edge and move outward to leave a small gap around it, staying there while hovered and closing back in when the pointer leaves: smooth and quick.
Draw the outline so it doesn't change the element's size or push nearby content, and show the same effect on keyboard focus.A
Hover to play
Hollow
Also called Ghost fill
The filled background empties, leaving only an outlined button on hover.
Use for
Buttons
Add a "Hollow" hover effect (also called ghost fill) to [where].
The filled background should fade away, leaving only the outline, and the label should change color to stay readable on the empty background: smooth and quick.
Keep the border the same thickness in both states so the element doesn't change size, and show the same effect on keyboard focus.More in Hover
A
Hover to play
Concentric border rings expand outward or contract inward from the element on hover.
Use for
Buttons
Add a "Border Ripple" hover effect to [where].
When the pointer enters, a couple of border rings should spread outward from the element one after another and fade away: quick and light, like a ripple.
Play it once per hover rather than looping, and don't let the rings shift the surrounding layout.A
Hover to play
Bounce Scale
Also called Bounce In / Out
The element scales with an elastic overshoot when hover starts or ends.
Use for
Buttons, badges
Add a "Bounce Scale" hover effect (also called bounce in / out) to [where].
The element should grow slightly larger with a springy, visible overshoot, briefly going past its final size before settling, and bounce back the same way when the pointer leaves.
Keep the surrounding layout from shifting, and show the same effect on keyboard focus.ABCDEF
Move your pointer here
Card Hover Effect
Also called Sliding highlight card grid
A highlight background slides between cards in a grid to follow whichever card is hovered.
Use for
Card grids, feature lists
Add a "Card Hover Effect" (also called sliding highlight card grid) to [where].
A soft highlight background should appear behind the hovered card and glide smoothly to whichever card the pointer moves to next, fading out when the pointer leaves the grid.
Make keyboard focus move the highlight the same way, and keep the cards themselves from shifting.