Skip to content
All effectsButton

Live Wire

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.

Pure CSSButtonPro

Usage

Activate

Meant for

ButtonCardIcon Button

Examples

On a Icon Button

On a small square target the ring is the whole component, so keep it slow — at 2.2s it reads as alive, at 0.8s it reads as an error state. The two empty spans are the ring and its glow; the glow sits behind the icon and the button's own fill is repainted over the middle, so it only shows around the edge.

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