Shutter Fill

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.

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.

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.

Solid panels sweep across the screen to cover the old page, then retract to reveal the new one.

Add a "Curtain / Panel Wipe" page transition (also called a page wipe or staggered panels) to [where].
Solid panels should sweep in one after another to cover the old page, the page should switch while it is fully covered, and the panels should carry on out of view to reveal the new one: bold and smooth.
Never show the new page before the panels have covered the old one, and use a plain fade instead for users who prefer reduced motion.

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.