Neon glow button

CTA with a stacked-ring glow that intensifies on hover. The "this is the action" button.

CTAs Captured JS-free

Use when — the hero's primary CTA on a dark hero. The glow needs darkness to read — on a cream background it looks merely "soft." Use the neon color the brand uses elsewhere (don't add new accent colors just for this button).

Live demo

The three-layer shadow stack

box-shadow:
  0 0 0 4px rgba(200,16,46,0.14),      /* halo ring 1 — visible always */
  0 6px 18px var(--red-glow),          /* down-glow shadow */
  inset 0 1px 0 rgba(255,255,255,0.18); /* top edge highlight */

Three layers — a soft halo ring around the button, a directional glow shadow underneath, and a thin top edge-light to make the button look slightly 3D. None alone is the look; together they read as "this thing is on."

The hover state — expand the glow

.btn-neon:hover {
  background: var(--red-dark);
  box-shadow:
    0 0 0 6px rgba(200,16,46,0.22),    /* halo ring widens + brightens */
    0 12px 32px var(--red-glow),       /* down-glow grows */
    0 0 28px var(--red-glow),          /* NEW: omnidirectional glow */
    inset 0 1px 0 rgba(255,255,255,0.22);
}

On hover, all three rings grow + a new omnidirectional glow appears. The button feels like it "lights up" rather than just changing color.

Variants worth considering

Always-glowing version — for a "live" feel, run a subtle pulse animation that gently grows and shrinks the outer halo every 2-3 seconds. Combine with the pulse-live-dot pattern logic.

Brand color swap — duplicate the rule with cyan/blue/gold/whatever. Same structure, different hex codes.

Combined with shine sweep — layer the shine-sweep pseudo-element on top of the neon glow for a CTA that both glows and gets a light streak. Use very sparingly — it can read as "trying too hard."

Source: Chevy 55 hero CTA (user-uploaded HTML, 2026-05-18).