Make Glowing Neon Text Hover Using HTML & CSS

Make Glowing Neon Text Hover Using HTML & CSS

CSS3’s text-shadow property is extremely useful in creating many different text effects, the coolest of which is probably an effect that makes the text look like it’s glowing. When combined with some bright colors applied to the text shadow, the glow effect becomes a nifty neon glow effect. Check out the code below: 

HTML Code:

<div class="neon">
    <span class="neon_word">neon</span>
</div>

CSS Code: 

html,
body {
  margin: 0;
  height: 100%;
}
html {
  font-size: 30px;
}
body {
  font-family: 'Markazi Text', serif;
  font-size: 1rem;
  background-image: url("https://www.dropbox.com/s/2ct0i6kc61vp0bh/wall.jpg?raw=1");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #141414;
}
/*-- Sign Styles --*/
.neon {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.neon_word {
  font-size: 5.6rem;
  text-align: center;
  color: #c6e2ff;
  text-transform: uppercase;
}
.neon_word:hover{
    -webkit-animation: neon .08s ease-in-out infinite alternate;
          animation: neon .08s ease-in-out infinite alternate;
}
/*-- Animation Keyframes --*/
@-webkit-keyframes neon {
  from {
    text-shadow: 0 0 6px rgba(202, 228, 225, 0.92), 0 0 30px rgba(202, 228, 225, 0.34), 0 0 12px rgba(30, 132, 242, 0.52), 0 0 21px rgba(30, 132, 242, 0.92), 0 0 34px rgba(30, 132, 242, 0.78), 0 0 54px rgba(30, 132, 242, 0.92);
  }
  to {
    text-shadow: 0 0 6px rgba(202, 228, 225, 0.98), 0 0 30px rgba(202, 228, 225, 0.42), 0 0 12px rgba(30, 132, 242, 0.58), 0 0 22px rgba(30, 132, 242, 0.84), 0 0 38px rgba(30, 132, 242, 0.88), 0 0 60px #1e84f2;
  }
}
@keyframes neon {
  from {
    text-shadow: 0 0 6px rgba(202, 228, 225, 0.92), 0 0 30px rgba(202, 228, 225, 0.34), 0 0 12px rgba(30, 132, 242, 0.52), 0 0 21px rgba(30, 132, 242, 0.92), 0 0 34px rgba(30, 132, 242, 0.78), 0 0 54px rgba(30, 132, 242, 0.92);
  }
  to {
    text-shadow: 0 0 6px rgba(202, 228, 225, 0.98), 0 0 30px rgba(202, 228, 225, 0.42), 0 0 12px rgba(30, 132, 242, 0.58), 0 0 22px rgba(30, 132, 242, 0.84), 0 0 38px rgba(30, 132, 242, 0.88), 0 0 60px #1e84f2;
  }
}