Press (Button Tap Scale)

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

The element scales with an elastic overshoot when hover starts or ends.

Add a "Bounce Scale" hover effect (also called bounce in / out) to [where].
The element should grow slightly larger with a springy, visible overshoot, briefly going past its final size before settling, and bounce back the same way when the pointer leaves.
Keep the surrounding layout from shifting, and show the same effect on keyboard focus.

Holding an item down for a moment triggers extra actions or a progress fill.

Add a "Long Press" interaction (also called press and hold or touch and hold) to [where].
While the item is held down it should sink slightly as a progress fill sweeps across it at a steady pace, and when the fill completes it springs back and opens its menu; letting go early cancels and resets the fill.
Give keyboard and screen reader users another way to reach the same actions, and do not let the hold trigger text selection or the browser's own context menu.

Dragging a list down reveals a spinner and reloads the content on release.

Add a "Pull to Refresh" interaction (also called swipe to refresh) to [where].
When the list is pulled down from the top it should follow the finger with some resistance and reveal a spinner that turns as it is pulled; on release the spinner keeps spinning while the content reloads, then the list slides smoothly back up.
Only start it when the list is already scrolled to the top, and give keyboard and screen reader users a regular refresh control too.

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 circle and tick draw themselves to confirm an action succeeded.

Add a "Success Checkmark" animation (also called an animated success tick) to [where].
A circle should draw itself around in one smooth stroke, then the tick draws inside it and the whole mark gives a small, gentle pop: calm and confident.
Play it once when the action succeeds, pair it with a text message screen readers can announce, and show the finished mark right away for users who prefer reduced motion.