Micro-Interactions Snippets — Free HTML CSS JS Micro-Interaction UI Examples

A micro-interaction is the smallest complete unit of interface feedback: a button that acknowledges a press, a toggle that slides rather than jumps, a like that bursts, a card that lifts under the cursor. Individually they are trivial. Collectively they are most of what people mean when they say an interface feels good.

These snippets cover the vocabulary — ripples, magnetic attraction, hover lifts and reveals, state transitions, success ticks and confetti — each small enough to lift into an existing component without restructuring anything.

Acknowledging the action, not decorating it

Every micro-interaction here exists to confirm that something the user did actually registered — a click landed, a toggle moved, a value changed. A ripple originates from the real click coordinates rather than the element's centre, which is what makes it read as a direct response to that specific tap rather than a generic animation that happens to play on click.

Cheap effects that still feel physical

A magnetic button's attraction toward the cursor and its return to rest both run through a lerp — the position eases a fixed percentage of the remaining distance toward its target on every animation frame, rather than jumping or moving at constant speed. That single technique, reused across the magnetic and hover-follow effects in this tag, is what gives cursor-following motion a sense of weight without any physics engine.

Cleanup as part of the interaction

A ripple span, ideally, does not accumulate: it is created on click, scaled and faded via a keyframe, and removed from the DOM on animationend. Confetti particles work the same way — created, animated with a gravity term reducing their velocity each frame, then removed once fully faded. Skipping that removal step is what turns a snappy micro-interaction into a slow memory leak on a page where the action repeats often.

Knowing when to stop

The rule that keeps this tag's effects from becoming exhausting is animating only what the user just caused, not the content they are trying to read next to it — and keeping any added delay to roughly 200 milliseconds so feedback never gets in the way of the next action. Every effect here also drops its movement, while keeping the underlying state change, under prefers-reduced-motion.