Neon Pulse
No library Beginner
A vivid green neon glow breathes in and out continuously around the button using layered box-shadows — ideal for a primary CTA that demands attention. Pure CSS, no dependencies.
A vivid green neon glow breathes in and out continuously around the button using layered box-shadows — ideal for a primary CTA that demands attention. Pure CSS, no dependencies.
Goal: Create a "Neon Pulse" button animation.
Visual behavior: A vivid green (#22c55e) button continuously breathes — its box-shadow oscillates between a tight dim glow (0 0 6px at 40% opacity) and a wide bright halo (0 0 14px at 80% + 0 0 36px at 28% + 0 0 56px at 8%) over ~2s. The button text and border are green-tinted, background is a very low-opacity green. Great for a primary CTA that needs ambient attention.
Technique: A CSS @keyframes animation on box-shadow, duration 2s, ease-in-out, infinite. No hover required — the button pulses continuously.
Accessibility: Animation paused under prefers-reduced-motion; a static dim glow is applied via box-shadow as fallback. Focus ring preserved.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.