Glow CTA

An accent button with a breathing halo that intensifies on hover

Create a glowing call-to-action button. A solid accent pill button (e.g. 'Start free →') sitting on top of a soft halo: an absolutely-positioned blurred blob behind the button (same shape, ~20-24px blur, the accent color) that breathes continuously: scale from 1 to 1.18 and opacity from 0.4 to 0.68 and back, easeInOut, 2.6s per cycle, infinite. The button itself also carries a subtle colored box-shadow (accent at ~35% alpha, 18px blur) so the glow reads even where the blob is faint. On hover the halo intensifies (scale range shifts to about 1.05-1.28, opacity to 0.6-0.9) while the button lifts 1px and scales to 1.05; pressing squashes it to 96%. Keep the halo strictly behind the button (z-order) and non-interactive (pointer-events: none). Use this for the ONE primary action on a screen: a page of glowing buttons reads as noise. Accessibility: the halo is decorative: aria-hidden. The button keeps a real label. If prefers-reduced-motion is set, stop the breathing and show a static soft glow. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.

Rate it
0
0

We'd like to measure how the site gets used, with Google Analytics. It sets cookies. Everything the site needs to work runs either way. How we handle data