Skip to content
All effectsButton

Squash

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

Pure CSSButton

Usage

Saved ✓

Meant for

ButtonKPIToast

Examples

On a Button

Volume-conserving squash and stretch: every keyframe multiplies out to roughly the same area, which is why it reads as matter and not as a scale. It belongs on the moment of confirmation — the button that just saved — not on a resting control.

The class is wm wm-squash — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.