← All effects

Glow Pulse CTA

Micro-interactionVanilla JS · zero dependenciesbox-shadow only · no canvas
-- fps
prefers-reduced-motion detected — steady glow, no pulse

X-ray · layers

the glow breathes
a ring departs on each breath
breathing quickens under the cursor

Parameters

Breath period2.0 s
Glow strength0.80
Glow spread28 px
Hover speed-up2.2×
your version · updates as you tinker

How this effect works

The glow is one box-shadow whose size and opacity ride a sine wave — the button literally breathes: the shadow inflates to the full spread at the top of each breath and relaxes near zero at the bottom. Slow periods (3–5s) read as calm confidence; fast ones read as urgency. That single number is most of the design.

The halo ring makes the breath visible at a distance: a thin circle sitting exactly on the button's outline scales up and fades out once per breath, synchronized to the same clock, like a ripple leaving the surface. And the hover boost is the interaction payoff — the moment your cursor arrives, the same clock simply runs faster, so the button visibly gets excited about being touched. No second animation, no state machine: one clock, one multiplier.

Production notes: respects prefers-reduced-motion (steady mid-glow, no pulse) · box-shadow animation is cheap for one hero button — don't put twenty of these on a page · the ring is a separate element so the shadow and the outline never fight · the copied snippet is self-contained HTML + CSS + JS.