How to Create Glowing Neon Buttons with CSS

In this tutorial, we'll have some fun with CSS, creating neon buttons with glow effects and mouse event handlers. Here's a sneak peek at what we'll be creating. Use your mouse to hover over the buttons for a beautiful neon glow effect (tap on a mobile device):

The HTML

First, let's create our HTML buttons:

<div class="neon-buttons">
	<button type="button" class="neon pink">Neon Pink</button>
	<button type="button" class="neon green">Neon Green</button>
	<button type="button" class="neon blue">Neon Blue</button>
</div>

Each button is assigned the neon class with its own color class name indicator, so we can adjust the color of each button as needed.

The CSS

Now, we'll get down to the CSS code! First, we'll do some basic styling for our buttons as they'll appear to the user without performing any interactions:

button.neon {
	border: 2px solid #222;
	border-radius: 4px 4px 4px 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	background: none;
	box-shadow: none;
	font-size: 14px;
	color: white;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 15px 20px;
	margin: 0px 4px;
	cursor: pointer;
	transition: 0.15s all ease-in-out;
	-moz-transition: 0.15s all ease-in-out;
	-webkit-transition: 0.15s all ease-in-out;
}

Next, we'll create a hover effect applied to all of the buttons:

button.neon:hover {
	border: 2px solid transparent;
	color: #111;
	-webkit-box-reflect: below 1px linear-gradient(transparent, #001);
}

Each hover effect will show a transparent border that's two pixels thick with black text and a neon reflection below the button.

The reflection will only display in browsers that support the -webkit prefix and the Opens new tab to the Can I Use website">box-shadow CSS rule.

Finally, we'll add hover effects, each button with its own background and shadow color:

button.neon.pink:hover {
	background: #f4349a;
	box-shadow: 0px 0px 5px #f4349a,
				0px 0px 25px #f4349a,
				0px 0px 50px #f4349a,
				0px 0px 200px #f4349a;
}

button.neon.green:hover {
	background: #97e355;
	box-shadow: 0px 0px 5px #97e355,
				0px 0px 25px #97e355,
				0px 0px 50px #97e355,
				0px 0px 200px #97e355;
}

button.neon.blue:hover {
	background: #03e9f4;
	box-shadow: 0px 0px 5px #03e9f4,
				0px 0px 25px #03e9f4,
				0px 0px 50px #03e9f4,
				0px 0px 200px #03e9f4;
}

Conclusion

That's all there is to it! Creating glowing neon buttons with CSS is a pretty simple task with very little code and impressive results. Play around with the colors, shadows, and glow effects to come up with your own unique look.