Botão Efeito Neon com Css

Neste artigo vamos fazer um Botão Efeito Neon aplicando a propriedade box-shadow com Css.

Box-shadow permite que você adicione em quase qualquer elemento efeitos de sombra em volta de um box-model.

Vamos Adicionar o Html:

<a href="#" class="neon-blue"> Neon Blue </a>
<a href="#" class="neon-yellow"> Neon Yellow </a>
<a href="#" class="neon-red"> Neon Red </a>

Vamos adicionar o Css:

/*Btn Blue*/
.neon-blue{
  position: relative;
  display: inline-block;
  padding: 15px 20px;
  margin: 40px 0;
  color:#0aa8e6;
  font-family:'open_sansbold';
  text-decoration: none;
  transition: 0.4s;
  letter-spacing: 4px;
  overflow: hidden;
  margin-right: 50px;
  border: 2px solid #0aa8e6;
  border-radius:50px;
}

.neon-blue:hover{
  background: #0aa8e6;
  color: #000;
  box-shadow: 0 0 10px #0aa8e6, 0 0 40px #0aa8e6, 0 0 70px #0aa8e6;
}

.neon-blue:active{

   color:#0aa8e6; 
   background: #000000;
}

/*Btn Red*/
.neon-red{
  position: relative;
  display: inline-block;
  padding: 15px 20px;
  margin: 40px 0;
  color:#fd0018;
  font-family:'open_sansbold';
  text-decoration: none;
  transition: 0.4s;
  letter-spacing: 4px;
  overflow: hidden;
  margin-right: 50px;
  border: 2px solid #fd0018;
  border-radius:50px;
}

.neon-red:hover{
  background: #fd0018;
  color: #000;
  box-shadow: 0 0 8px #fd0018, 0 0 35px #fd0018, 0 0 60px #fd0018;
}

.neon-red:active{

   color:#fd0018; 
   background: #000000;
}

/*Btn Yellow*/
.neon-yellow{
  position: relative;
  display: inline-block;
  padding: 15px 20px;
  margin: 40px 0;
  color:#f9f502;
  font-family:'open_sansbold';
  text-decoration: none;
  transition: 0.4s;
  letter-spacing: 4px;
  overflow: hidden;
  margin-right: 50px;
  border: 2px solid #f9f502;
  border-radius:50px;
}

.neon-yellow:hover{
  background: #f9f502;
  color: #000;
  box-shadow: 0 0 10px #f9f502, 0 0 40px #f9f502, 0 0 70px #f9f502;
}

.neon-yellow:active{

   color:#f9f502; 
   background: #000000;
}

Veja o Resultado !

Baixar Código Veja Funcionando