CSS Glowing Button with box-shadow
Creating a glowing button with CSS is an easy way to add life to your UI. Using only box-shadow and the :hover selector, you can create an effect that reacts smoothly to user interaction. Let’s build a neon-style button that glows brighter when hovered.
HTML
<button>Glowing Button</button>
CSS
button {
background: #00fefa;
color: rgba(0, 0, 0, 0.6);
box-shadow: 0 0 5px cyan, 0 0 25px cyan;
}
button:hover {
box-shadow:
0 0 5px cyan,
0 0 25px cyan,
0 0 50px cyan,
0 0 100px cyan,
0 0 200px cyan;
}
Understanding the box-shadow effect
The glow effect is created by stacking several layers of box-shadow. Each shadow has the same color but a larger blur radius. This builds a layered neon halo that grows as the user hovers over the button.
...
box-shadow:
0 0 5px cyan,
0 0 25px cyan,
0 0 50px cyan,
0 0 100px cyan,
0 0 200px cyan;
...
Each shadow adds a level of blur and brightness. The more layers you use, the stronger and smoother the glow becomes. You can customize the color and size to fit your design. If you want to experiment with different glow effects, try our CSS box-shadow generator to preview them in real time.
Adding interactivity with :hover
The magic happens with the :hover pseudo-class. It triggers the animation by expanding the shadow layers when the user moves the cursor over the button.
...
button:hover {
box-shadow:
0 0 5px cyan,
0 0 25px cyan,
0 0 50px cyan,
0 0 100px cyan,
0 0 200px cyan;
}
...
This small change adds depth and motion, giving your button a vivid neon pulse.
Tips for customization
- Change the color for different moods (e.g. pink, lime, or purple).
- Adjust blur radiuses for softer or sharper edges.
- Add
transition: all 0.3s ease;for smoother animation. - Combine with
border-radiusto match your design style.
Why it works well
This approach is lightweight, pure CSS, and easy to implement. It’s perfect for call-to-action buttons, login screens, or any interface that needs a futuristic touch.