Shrink

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.

The element shrinks slightly while pressed and springs back on release.

Add a "Press (Button Tap Scale)" effect (also called tap feedback or press state) to [where].
While it is pressed the element should shrink slightly and darken a touch, then spring back to full size with a small bounce on release: quick and subtle.
Show the same feedback for keyboard presses and touch, and keep the surrounding layout from shifting.

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 shrinks and fades until it vanishes.

Add a "Zoom Out" exit animation (also called scale out) to [where].
The element should shrink toward its center while fading until it vanishes: quick, speeding up as it goes.
Remove it from the layout and from keyboard focus only after it has vanished, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).

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