Sink

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

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.

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.

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.