Hover State Layer

The background and text color cross-fade to a new color on hover.

Add a "Background Fade" hover effect (also called color fade) to [where].
The background and text colors should cross-fade smoothly to new colors while the pointer is over the element, and fade back when it leaves: calm, with no movement.
Keep enough contrast between text and background in both states, and show the same effect on keyboard focus.

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.

An icon drops out of view and comes back from above on hover.

Add an "Icon Drop" hover effect to [where].
The icon inside the element should drop down out of view and then fall back into place from above: quick, with a soft landing.
Play it once each time the pointer enters rather than looping, and keep the label and button size unchanged.

An icon drifts out of the button and fades while a new one floats in.

Add an "Icon Float Away" hover effect to [where].
The current icon should drift upward and fade out while a new icon floats up from below into its place, smoothly, and the swap should reverse when the pointer leaves.
Keep the button size fixed during the swap, and show the same effect on keyboard focus.

An icon inside a button spins around when the button is hovered.

Add an "Icon Spin" hover effect to [where].
The icon inside the element should spin one full turn smoothly when the pointer enters, and turn back when it leaves.
Spin only the icon, not the whole button, and show the same effect on keyboard focus.