Neon glow text

Neon glow text
09.12.2017

If you love the neon effects, then this is the tutorial for you. In this tutorial I will show you how to make text with neon effect with several css lines that will allow you to use it immediately or just hover. Through the tutorial I used Ubuntu font with font weight of 700.  
Only thing you need is one <p> element with <span> element in it with text you want. The first element <p> will serve me for a permanent neon effect while a secont one will only be on hover. 

 <p><span>Zcode</span></p>  
 <p><span>Zcode</span></p>

I set the element <p> to the font size 7em, but you can put the size of what is ever you want. Then, the element <span> put the transition of 0.5s. Then I put the neon infinity animation on the span element with a 1.5s duration with ease-in-out effect. 

p {
  text-align: center;
  font-size: 7em;
  margin: 20px 0 20px 0;
}

span {
  cursor:pointer;
  transition: all 0.5s;
}

p:nth-child(1) span {
  font-family: 'Ubuntu', sans-serif;
  color: #fff;
  animation: neon1 1.5s ease-in-out infinite alternate;
  font-weight:700;
}

p:nth-child(1) span:hover {
  color: #228DFF;
  animation: none;
}

p:nth-child(2) span {
  color: #228DFF;
 font-family: 'Ubuntu', sans-serif;
 font-weight:700;
}

p:nth-child(2) span:hover {
  animation: neon2 1.5s ease-in-out infinite alternate;
}



p span:hover {
  color: #ffffff;
}

For the neon animation I used only to go from one color to the other, which you can also change as desired. One animation is for red color, and second one is for blue color.

@keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
  }
}

@keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}

Two finished different examples you can se below.