BUTTONS

Neon Glow Button

A clean neon-style button with a glowing border and smooth hover effect. Copy the code and use it in your own project.

HTML
<button class="neon-btn" type="button">
  <span>Hover Me</span>
</button>
CSS
.neon-btn{
  padding:15px 34px;
  border:2px solid #22d3ee;
  border-radius:10px;
  background:transparent;
  color:#22d3ee;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  box-shadow:
    0 0 10px rgba(34,211,238,.35),
    inset 0 0 8px rgba(34,211,238,.08);
  transition:
    transform .25s ease,
    color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.neon-btn:hover{
  color:#ffffff;
  background:#22d3ee;
  transform:translateY(-2px);
  box-shadow:
    0 0 18px rgba(34,211,238,.70),
    0 0 38px rgba(34,211,238,.45),
    0 0 55px rgba(34,211,238,.20);
}

How This Neon Glow Button Works

The Neon Glow Button creates a bright neon-style interaction using CSS borders, shadows, background changes, and transitions. The HTML stays simple, using a standard button with a span for the visible “Hover Me” text.

The button starts with a transparent background and a 2px cyan #22d3ee border. The text uses the same cyan color, creating the outlined neon appearance against a dark background.

The initial glow comes from two layered shadows. An outer box-shadow creates a soft cyan light around the button, while the inset shadow adds a subtle glow inside the border and gives the component more depth.

When the user hovers over the button, its background changes to #22d3ee and the text becomes white. At the same time, translateY(-2px) lifts the button slightly to make the interaction feel more responsive.

The hover state uses three progressively larger cyan shadows at 18px, 38px, and 55px. These layered shadows spread the light outward at different intensities, producing the stronger neon glow around the button. You can learn more about layered shadows in the MDN Web Docs guide to box-shadow.

All these changes use .25s transitions, allowing the movement, background, text color, and glow to change smoothly instead of switching instantly.

Customizing This Neon Glow Button

You can customize the Neon Glow Button by changing a few CSS values while keeping the same HTML structure. The neon color, glow strength, button size, border thickness, corner radius, and hover movement can all be adjusted to match your design.

  • Neon color: Change #22d3ee to any color that fits your website or interface.
  • Glow strength: Adjust the opacity and blur values inside the box-shadow properties.
  • Border thickness: Change 2px in the border property for a thinner or thicker neon outline.
  • Button size: Modify padding: 15px 34px to make the button smaller or larger.
  • Corner radius: Adjust border-radius: 10px for sharper or more rounded corners.
  • Hover movement: Change translateY(-2px) to control how far the button lifts on hover.

Where to Use This Neon Glow Button

The Neon Glow Button works well in interfaces where an important action needs strong visual emphasis. Its bright cyan border and layered hover glow stand out especially well against dark backgrounds.

  • Call-to-action sections: Use it for actions such as “Get Started,” “Explore,” or “Join Now.”
  • Gaming websites: A good fit for futuristic menus, controls, and interactive interfaces.
  • Portfolio websites: Use it for project links, contact buttons, or featured work.
  • Dark landing pages: The neon glow creates strong contrast against dark backgrounds.
  • Developer websites: Works well with coding, technology, and cyber-inspired designs.
  • Modern dashboards: Use it for important controls that need more visual attention.

Because the neon effect is created entirely with CSS, the button remains lightweight and does not require JavaScript for its visual animation.

If you want another modern CSS button style, check out the Glassmorphism Button, which uses transparency and backdrop blur to create a frosted-glass effect.

Frequently Asked Questions

Does the Neon Glow Button require JavaScript?
No. The neon border, glow, hover movement, and color changes are created entirely with CSS.

How is the neon glow effect created?
The button uses multiple box-shadow layers with the cyan #22d3ee color. Different blur sizes and opacity levels spread the light around the button to create the glowing effect.

Can I change the neon glow color?
Yes. Replace #22d3ee and its matching RGB shadow values with another color to create purple, green, pink, or any other neon style.

Can I make the glow stronger or softer?
Yes. Adjust the blur sizes and opacity values in the box-shadow properties. Larger blur values create a wider glow, while lower opacity makes the effect more subtle.

The Neon Glow Button combines a bright outlined border, layered cyan shadows, and smooth hover feedback to create an eye-catching neon interaction. Its CSS-only design keeps the component lightweight, easy to customize, and especially effective for dark, modern, or technology-focused interfaces.

Scroll to Top