Hover

A colored background sweeps in from an edge with an elastic overshoot.

Add a "Background Bounce Sweep" hover effect to [where].
A new background color should sweep in from one edge, overshoot the far edge a little with an elastic bounce and then settle, while the label color switches to stay readable; on leave it slides back out smoothly.
Keep the label above the fill, and show the same effect on keyboard focus.

The background and text color cross-fade to a new color on hover.

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 colored background wipes across the element from one edge on hover.

Add a "Background Sweep" hover effect (also called background fill or slide fill) to [where].
A new background color should wipe across from the left edge to the right, smooth and quick with no bounce, and retract the same way when the pointer leaves, while the label color switches to stay readable.
Keep the fill clipped inside the element's shape, and show the same effect on keyboard focus.

The element floats up then bobs or hangs up and down continuously while hovered.

Add a "Bob" hover effect (also called hang) to [where].
The element should float up a little, then keep bobbing gently up and down while the pointer stays over it, and drop back when the pointer leaves: slow and soft.
Loop the bobbing only while hovered, and keep it still for users who prefer reduced motion.

The border color fades in or changes on hover.

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.

Concentric border rings expand outward or contract inward from the element on hover.

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.

The element scales with an elastic overshoot when hover starts or ends.

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.

A highlight background slides between cards in a grid to follow whichever card is hovered.

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.

A soft radial light follows the pointer across the card surface and reveals the background beneath.

Add a "Card Spotlight" effect (also called spotlight hover, pointer glow, mouse-following glow or radial gradient hover) to [where].
A soft, faint radial glow should follow the pointer across the card surface, fading in when the pointer enters and out when it leaves.
Keep the glow behind the card content so text stays readable, and on touch devices simply leave the card unlit.

A corner of the element folds up like a turning page on hover.

Add a "Curl" hover effect (also called page curl) to [where].
One corner of the element should fold up smoothly like a page being turned, showing the back of the fold, and flatten again when the pointer leaves.
Keep the fold small so it doesn't cover important content, and show the same effect on keyboard focus.

An overlay slides in from the side the pointer entered and leaves toward the side it exits.

Add a "Direction Aware Hover" effect (also called direction-aware overlay) to [where].
An overlay should slide in from whichever side the pointer entered and slide out toward the side it leaves: quick and smooth.
Work out the side from the pointer position on entry and on exit, and on touch or keyboard focus fall back to one default direction.

Icons in a row grow smoothly as the pointer approaches, like the macOS Dock.

Add a "Dock Magnification" effect (also called dock) to [where].
Icons in the row should grow smoothly as the pointer gets closer, with the nearest icon largest and its neighbors slightly enlarged, and all return to normal size when the pointer leaves.
Grow the icons upward from a fixed baseline, and keep every icon usable at its normal size on touch and keyboard.

The element rises upward a few pixels on hover, as if floating.

Add a "Float" hover effect (also called lift or raise) to [where].
The element should rise up a little and stay raised while the pointer is over it, then settle back when it leaves: smooth and gentle, with no bounce.
Move it visually without shifting the surrounding layout, and show the same effect on keyboard focus.

Sibling cards blur and dim while one hovered card stays sharp.

Add a "Focus Cards" effect (also called blur siblings on hover, hover focus blur or card hover effect) to [where].
While the pointer is over one card, the other cards should blur, dim and shrink slightly as the hovered card stays sharp, all with a smooth fade that reverses when the pointer leaves.
Apply the same focus on keyboard focus, and keep every card sharp and readable when nothing is hovered.

A colored light halo appears around the element on hover.

Add a "Glow" hover effect (also called neon glow) to [where].
A soft colored halo should fade in around the element while the pointer is over it and fade out when it leaves: gentle, with no movement.
Keep the halo from affecting layout, and show the same effect on keyboard focus.

The element smoothly scales up slightly when the pointer is over it.

Add a "Grow" hover effect (also called scale up) to [where].
The element should scale up slightly and smoothly while the pointer is over it, and shrink back when the pointer leaves: quick and subtle.
Keep the surrounding layout from shifting, and show the same effect on keyboard focus.

The filled background empties, leaving only an outlined button on hover.

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.

A gradient border animates around the element and expands when the pointer is over it.

Add a "Hover Border Gradient" effect to [where].
A short gradient highlight should rest on one part of the border; while the pointer is over the element it should travel steadily around the border as the whole border brightens with a soft glow.
Animate the border only while hovered, and keep it still for users who prefer reduced motion.

A soft shadow appears or deepens beneath the element on hover to suggest elevation.

Add a "Hover Shadow" effect (also called drop shadow on hover or elevation on hover) to [where].
A soft shadow beneath the element should deepen and spread while the pointer is over it so it looks raised, and fade back when it leaves, while the element itself stays in place.
Keep the shadow subtle enough to work in both light and dark themes, and show the same effect on keyboard focus.

A translucent overlay tints the element to show the pointer is over it.

Add a "Hover State Layer" (also called hover state, state layer or hover overlay) to [where].
A faint translucent overlay in the content color should fade in quickly over the element while the pointer is over it, and fade out when it leaves.
Keep it faint so contrast stays intact, and use the same layer approach for focus and pressed states.

An icon drops out of view and comes back from above on hover.

Add an "Icon Drop" hover effect to [where].
The icon inside the element should drop down out of view and then fall back into place from above: quick, with a soft landing.
Play it once each time the pointer enters rather than looping, and keep the label and button size unchanged.

An icon drifts out of the button and fades while a new one floats in.

Add an "Icon Float Away" hover effect to [where].
The current icon should drift upward and fade out while a new icon floats up from below into its place, smoothly, and the swap should reverse when the pointer leaves.
Keep the button size fixed during the swap, and show the same effect on keyboard focus.

An icon inside a button spins around when the button is hovered.

Add an "Icon Spin" hover effect to [where].
The icon inside the element should spin one full turn smoothly when the pointer enters, and turn back when it leaves.
Spin only the icon, not the whole button, and show the same effect on keyboard focus.

The button label slides out and an arrow and fill expand in when hovered.

Add an "Interactive Hover Button" effect to [where].
The small dot beside the label should expand to fill the button while the label slides out to the side and fades, and the label with an arrow slides in over the new fill: smooth and quick.
Keep the button size fixed and the label readable throughout, and show the same effect on keyboard focus.

An arrow or the element itself slides a few pixels forward or backward on hover.

Add a "Nudge Forward / Backward" hover effect (also called arrow nudge) to [where].
The arrow should slide a little in the direction it points while the pointer is over the element, and slide back when it leaves: quick and small.
Move only the arrow without shifting the label or layout, and show the same effect on keyboard focus.

An outline grows outward from or shrinks toward the element on hover.

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 line grows above the text from the left, center, or right on hover.

Add an "Overline Grow" hover effect to [where].
A line above the text should grow outward from the center to both sides while the pointer is over it, and shrink back to the center when it leaves: quick and smooth.
Reserve space for the line so the text doesn't shift, and show the same effect on keyboard focus.

The element quickly scales up and settles back with a springy pop.

Add a "Pop" hover effect to [where].
Each time the pointer enters, the element should swell up once quickly and settle back to its normal size, like a small springy pop.
Play it once per hover rather than holding the larger size or looping, and keep the surrounding layout from shifting.

The element dips inward and returns, as if it were pushed like a physical button.

Add a "Push" hover effect to [where].
Each time the pointer enters, the element should dip smaller once quickly and spring back to its normal size, as if it were pushed in like a physical button.
Play it once per hover rather than looping, and keep the surrounding layout from shifting.

A colored circle grows from or shrinks toward the center to fill the element on hover.

Add a "Radial Fill" hover effect (also called circle expand) to [where].
A circle of the new color should grow smoothly from the center until it fills the element, and shrink back to the center when the pointer leaves, while the label color switches to stay readable.
Keep the circle clipped inside the element's shape and the label above it, and show the same effect on keyboard focus.

A rectangle expands or contracts inside the element to change its background on hover.

Add a "Rectangle Fill" hover effect to [where].
The new background color should close in from all four edges as an inner rectangle shrinks toward the center, and open back out when the pointer leaves, while the label color switches to stay readable: smooth and quick.
Keep the label above the fill, and show the same effect on keyboard focus.

The element turns by a few degrees when hovered.

Add a "Rotate" hover effect to [where].
The element should turn slightly clockwise while the pointer is over it and turn back when it leaves: smooth and subtle.
Keep the surrounding layout from shifting, and show the same effect on keyboard focus.

The corners of the element smoothly round on hover.

Add a "Round Corners" hover effect to [where].
The element's sharp corners should round off smoothly while the pointer is over it, and sharpen again when it leaves: soft and quick.
Keep the element's size unchanged, and show the same effect on keyboard focus.

A diagonal band of light sweeps across the element from one side to the other on hover.

Add a "Shine Sweep" hover effect (also called sheen, shiny button, shine on hover, glint, shimmer or shimmer button) to [where].
A soft diagonal band of light should sweep across the element from left to right, repeating with a short pause while the pointer stays over it.
Keep the band clipped inside the element, stop it when the pointer leaves, and don't run it for users who prefer reduced motion.

The element smoothly scales down slightly when hovered.

Add a "Shrink" hover effect (also called scale down) to [where].
The element should scale down slightly and smoothly while the pointer is over it, and grow back when the pointer leaves: quick and subtle.
Keep the surrounding layout from shifting, and show the same effect on keyboard focus.

The background opens or closes like shutters from the center or the edges on hover.

Add a "Shutter Fill" hover effect (also called shutter) to [where].
The new background color should open from a line down the center out to both sides like shutters, and close back to the center when the pointer leaves, while the label color switches to stay readable: smooth and quick.
Keep the fill clipped inside the element and the label above it, and show the same effect on keyboard focus.

The element moves downward a few pixels on hover, as if pressed into the page.

Add a "Sink" hover effect to [where].
The element should move down a little and stay there while the pointer is over it, as if pressed into the page, and rise back when it leaves: smooth, with no bounce.
Move it visually without shifting the surrounding layout, and show the same effect on keyboard focus.

The element shears sideways when hovered.

Add a "Skew" hover effect to [where].
The element should shear sideways into a slight slant while the pointer is over it, and straighten when it leaves: quick and smooth.
Keep the text readable while slanted and the surrounding layout from shifting, and show the same effect on keyboard focus.

A small speech-bubble triangle appears on one side of the element on hover.

Add a "Speech Bubble" hover effect (also called bubble) to [where].
A small triangle tail should slide out from behind one side of the element, turning it into a speech-bubble shape, and slide back in when the pointer leaves: quick and smooth.
Keep the tail the same color as the element so they read as one shape, and show the same effect on keyboard focus.

An inner border line appears inside the element edge on hover.

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 line slides in from the bottom or top edge into place to underline or overline the element.

Add an "Underline Reveal" hover effect (also called overline reveal or reveal) to [where].
A full-width line should slide up into place from just below the bottom edge while the pointer is over the element, and slide back down out of view when it leaves: quick and smooth.
Clip the line at the edge so it appears by sliding rather than fading or growing, and show the same effect on keyboard focus.

The card translates and scales slightly in response to pointer movement over it.

Add a "Wobble Card" effect to [where].
As the pointer moves over the card, the card should shift slightly toward it while its content shifts slightly the other way with a small scale-up, following smoothly, and everything settles back when the pointer leaves.
Keep the movement small, and turn it off on touch devices and for users who prefer reduced motion.