Skip to content
All effectsButton

Tap Spark

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

CSS + a few linesButtonPro

Usage

Tap

Meant for

ButtonIcon ButtonToggle

Examples

On a Icon Button

Press it. Sparks fly out on a rotated transform-origin, growing as they fade, once per press — the press restarts them by toggling data-wm-pressed on the spark layer. Eight nodes and one keyframe; set --wm-r per spark. The sparks get their own layer stacked on the button in one grid cell, so the button itself never moves.

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