Button

The arrow falls in and keeps falling out. The direction carries the meaning.

An echo of the button expands out of it and fades. One pseudo-element behind the real one, no extra markup.

Two blurred blobs slide along opposite edges inside an overflow-hidden pill.

Pieces launch on their own angle, rotate as they rise, and fade at the top. Colour and angle come from a custom property per piece.

Eight hard shadows fanning diagonally while the element counter-moves. Reads as solid, not soft.

Two faces on one element, turned on the X axis. backface-visibility is what keeps the back face hidden; without it both labels show through each other at the halfway point.

Solid turns to ghost using an inset shadow instead of a border, so nothing shifts by a pixel.

A single directional hop that points where the action goes. Download bounces down, send bounces right.

The icon turns while the button holds still. A whole axis of effects lives in that separation.

An inset second border. Nearly free as a focus-visible treatment.

Scaling to 2.1 rather than 1 is what makes the circle reach the corners.

Two identical rings, one blurred behind the other — that is the whole glow.

Two halves closing from top and bottom. Cheaper than a sweep and far more distinctive.

offset-path: rect() lets one element ride the border, and offset-rotate: auto keeps the head aimed along the edge. No SVG, no second layer.

Pure shear with decaying amplitude. Reads as material flexing, not as an object shaking.

One light sweeps across the fill. The cheapest effect in the set: a single moving background-position on an overlay.

A wide colour band drifting under the label. The stops are deliberately deep — white text on a naive rainbow fails contrast, and this one does not.

Real squash and stretch. Volume is conserved: as one axis grows the other shrinks.

One shape carrying three states: the width animates between them, the label and glyph pairs cross-fade, and the tick draws itself on arrival rather than appearing. The three widths are declared in the CSS; a width morph that adapts to arbitrary label text needs one measurement in JavaScript, which this does not do.

Two states stacked in one slot; one slides out as the other slides in. The button never changes size.

One dot scales to 34× and becomes the fill. Cheaper than animating a background.

A conic gradient rotating inside a masked ring. One layer, no SVG.

Two custom properties set on pointerdown carry the click coordinates.

Sparks fly out on a rotated transform-origin, scaling up as they fade. Eight nodes, one keyframe.