buttonneon-glowintermediate

Neon Glow Button

A cyberpunk-inspired button with a vibrant neon glow effect and pulsing shadow.

Preview

<button class="px-8 py-3 bg-transparent border-2 border-cyan-400 text-cyan-400 font-bold rounded-lg shadow-[0_0_15px_rgba(34,211,238,0.5)] hover:shadow-[0_0_30px_rgba(34,211,238,0.8)] hover:bg-cyan-400 hover:text-gray-900 transition-all duration-300">Enter</button>

Color Breakdown

Border

border-cyan-400

#22d3ee

Text

text-cyan-400

#22d3ee

Glow Shadow

shadow-[0_0_15px_rgba(34,211,238,0.5)]

#22d3ee

Hover Background

hover:bg-cyan-400

#22d3ee

Hover Text

hover:text-gray-900

#111827

Use Cases

Gaming sitesCyberpunk-themed UIsMusic and entertainment apps

Browser Support

All modern browsers. Box-shadow glow works in all evergreen browsers.

Related Recipes

Gradient Button

button - beginner

Ghost Button

button - beginner

Pill Button

button - beginner

Icon Button

button - beginner

Loading Button

button - intermediate

Outline Button

button - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Frequently Asked Questions

How do I change the neon color?▼

Replace cyan-400 with any bright Tailwind color like green-400, pink-400, or yellow-300, and update the rgba values in the shadow accordingly.

Can I add a pulsing effect?▼

Yes, add animate-pulse to the button or create a custom animation with @keyframes that alternates the shadow intensity.