Radial Fill

The new view is revealed inside a circle that expands from the click point.

Add a "Circular Reveal" transition (also called a clip-path circle expand or theme toggle reveal) to [where].
The new view should appear inside a circle that grows outward from the pressed control until it covers the whole area: smooth and steady, easing in and out.
Start the circle exactly where the control was pressed, and switch instantly without the circle for users who prefer reduced motion.

A circular wave expands and fades from the exact point of the click or tap.

Add a "Ripple" effect (also called a material ripple or ink ripple) to [where].
On each click or tap, a soft circular wave should spread out from the exact point that was pressed until it covers the element, fading as it grows: quick and light.
Clip the wave to the element's shape, let rapid presses each start their own ripple, and start it from the center for keyboard presses.

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.

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.