Neon button in HTML

Learn how to make neon button in html using css.

In this tutorial we are going to make neon button in html using the css selector :hover

Lets Start

The HTML code:

<a href="#" class="button" target="_blank">Button</a>

The CSS code:

.button {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  font-size: 20px;
  overflow: hidden;
  transition: 0.2s;
  margin: 10px;
}
.button {
  color: #ff0000;
  border: 2px solid #ff0000;
}
.button:hover {
  color: #842525;
  background: #ff0000;
  box-shadow: 0 0 10px #ff0000, 0 0 40px #ff0000, 0 0 80px #ff0000;
}

DEMO

Click here to see the demo

Finished

Thank you for following till the end. Ask questions in the comments section.