button glow shadow colored neon cta hover premium primary CTA with visual emphasis hero section call-to-action pricing "buy now" button dark UI accent button flat buttons lack visual weight on dark backgrounds need glowing CTA without gradient border want colored shadow that matches button color
Button Glow
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/button-glow.json Background
Customize
Quick Start
<button class="button-glow rounded-lg px-6 py-3 font-medium">Get Started</button>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 1130 bytes · 42 lines
- Custom Properties
-
--glow-color--glow-spread--glow-opacity--glow-offset-y - Classes
-
.button-glow
button glow shadow colored neon cta hover premium
The button casts a colored box-shadow that matches its own background color — like a neon reflection on the surface below. On hover the glow intensifies and the button lifts slightly; on press it settles back down. Uses oklch(from ... / opacity) with a color-mix() fallback.
Orange CTA (Sunsama-style)
<button class="button-glow rounded-full px-8 py-3 text-sm font-semibold"
style="--glow-color: oklch(0.7 0.18 50);">
Start free trial
</button>Indigo on dark background
<div class="bg-slate-950 p-12 text-center">
<button class="button-glow rounded-lg px-6 py-3 font-medium"
style="--glow-color: oklch(0.55 0.2 260);">
Get Started
</button>
</div>Emerald success button
<button class="button-glow rounded-lg px-6 py-3 font-medium"
style="--glow-color: oklch(0.6 0.18 155); --glow-spread: 2rem;">
Confirm Payment
</button>