CSS Glowing neon buttons.

This is a simple idea I had for a button that simulates a neon glowing effect.

Codepen

OW! glowing effect on the button hover.

Using CSS background: linear-gradient, we can create an attractive and glowing neon effect. On our website neon effect is used for the best attractive animation button effect, CSS keyframe animation, and transition are the most important properties.

CSS and HTML.

HTML code.

<h2 >Neon Effect  On Hover Button using CSS animation.</h2>
<div class="box">
<a class="a-n1" href="#">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  Hover Me
</a>
<a class="a-n2" href="#">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  Hover Me Too
</a>
</div>

CSS Code.

body {
  min-height: 100vh;
  background: #645caa;
  overflow: hidden;
  margin: 0px;
  padding: 0px; display: flex;flex-direction: column;
  justify-content: center;
  align-items: center;  
  text-align:center;
}
h2{
  color:#fff; font-size:24px;
}
.box{ padding-top:5%;
    display: flex;
  justify-content: center;
  align-items: center;
}
/*neon Button*/
.a-n2,
.a-n1 {
  margin-left: 20px;
  text-decoration: none;
  position: relative;
  padding: 15px 30px;
  overflow: hidden;
  transition: 0.2s all;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 4px;
}
.a-n1:hover {
  background: #f4d03f;
  color: #000;
  box-shadow: 0px 0px 10px #f4d03f, 0px 0px 40px#F4D03F, 0px 0px 80px #f4d03f;
  transition-delay: 1s;
}
.a-n2 span,
.a-n1 span {
  position: absolute;
  display: block;
}
.a-n1 span:nth-child(1) {
  top: 0px;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f4d03f);
}
.a-n1:hover span:nth-child(1) {
  left: 100%;
  transition: 0.5s;
}
.a-n1 span:nth-child(3) {
  bottom: 0px;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #f4d03f);
}
.a-n1:hover span:nth-child(3) {
  right: 100%;
  transition: 0.5s;
  transition-delay: 0.5s;
}
.a-n1 span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #f4d03f);
}
.a-n1:hover span:nth-child(2) {
  top: 100%;
  transition: 0.5s;
  transition-delay: 0.25s;
}
.a-n1 span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #f4d03f);
}
.a-n1:hover span:nth-child(4) {
  bottom: 100%;
  transition: 0.5s;
  transition-delay: 0.75s;
}
.a-n2:hover {
  background: #26a0da;
  color: #000;
  box-shadow: 0px 0px 10px #26a0da, 0px 0px 40px#26a0da, 0px 0px 80px #26a0da;
  transition-delay: 0.2s;
}
.a-n2 span:nth-child(1) {
  top: 0px;
  left: -91%;
  width: 100%;
  height: 2px;
  background: #26a0da;
}
.a-n2:hover span:nth-child(1) {
  left: 0%;
  transition: 0.3s;
}
.a-n2 span:nth-child(3) {
  bottom: 0px;
  right: -91%;
  width: 100%;
  height: 2px;
  background: #26a0da;
}
.a-n2:hover span:nth-child(3) {
  right: 0%;
  transition: 0.3s;
}
.a-n2 span:nth-child(2) {
  bottom: -70%;
  right: 0%;
  width: 2px;
  font-weight: 100;
  background: #26a0da;
  height: 100%;
}
.a-n2:hover span:nth-child(2) {
  bottom: 0%;
  transition: 0.3s;
}
.a-n2 span:nth-child(4) {
  top: -70%;
  left: 0%;
  width: 2px;
  font-weight: 100;
  background: #26a0da;
  height: 100%;
}
.a-n2:hover span:nth-child(4) {
  top: 0%;
  transition: 0.3s;
}

Output.

working code https://codepen.io/Omprkash_Rahangdale/pen/jOxmYLo?editors=1100