Link com efeito Neon

Neste artigos vamos fazer um link com efeito neon com css e html.

Vamos adicionar o html:

<a href="#" class="link-neon"><i class="icon icon-forward-1"></i> Saiba mais...</a> 

<a href="#" class="link-neon"><i class="icon icon-flash"></i> Veja mais...</a> 

Vamos adicionar o css:

 .link-neon {
 
    display: inline-block;
    border-bottom: 1px #910c7f solid;
    font-family: 'open_sanslight';
    font-size:1.3em;
    color:#ffffff;
    text-decoration:none;
    text-decoration: normal;
    text-align: center;
    text-shadow: 0 0 5px rgb(255, 255, 255) , 0 0 10px rgb(255, 255, 255) , 0 0 20px rgb(255, 255, 255) , 0 0 30px #ff00de , 0 0 70px #ff00de , 0 0 40px #ff00de , 0 0 60px #ff00de ;
    -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
    -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
    -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}

.link-neon:hover {
 
   text-shadow: 0 0 5px rgba(2,166,172,1) , 0 0 20px rgba(2,166,172,1) , 0 0 30px rgba(2,166,172,1) , 0 0 40px #00ffff , 0 0 70px #00ffff , 0 0 80px #00ffff , 0 0 100px #00ffff ;
   border-bottom: 1px #02a6ac solid;

}

Veja o Resultado!

Baixar Código Veja Funcionando