Background Sweep

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.

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 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.

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.

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.