Button
25 effects for the button family · every one loops · pure CSS unless a card says otherwise
The previews are open to everyone; the code of these effects comes with WunderUI Core and Pro.
An echo of the button expands out of it and fades. One pseudo-element behind the real one, no extra markup.
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. A celebration, so it bursts once.
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.
A ring and a blurred copy of its light behind it. The copy is not masked, because a mask would cut the blur off; the fill is painted over the middle instead, so the glow only shows around the edge.
The button gives under the finger: 97% in 80 ms the moment it is pressed, back over 150 ms on the entrance curve when it is let go. A transition, so pressing fast never restarts anything — and on a control used all day it is the only motion it needs.
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, 6° at most. Reads as material flexing, not as an object shaking. A reaction, so it plays once in 600 ms — a card landing on a column, a value that snapped.
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.
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.
A conic gradient in a square that turns inside a rim clipped to its own radius, so only rotate animates. One layer, no SVG.
Sparks fly out on a rotated transform-origin, scaling up as they fade. Eight nodes, one keyframe.