Botão Neon Css

Botão neon com css

O efeito de animação do botão de luz neon pode ser facilmente gerado aplicando HTML e CSS3. Usando HTML vamos desenhar a estrutura básica do botão com a class=”btn” no html e então usando as propriedades do CSS3, podemos criar o efeito de animação de luz neon.

Vamos adicionar o Código Html

Nesta seção, projetaremos uma estrutura simples de botões usando class=”btn” no html.

     <div class="btn">
  
        <a href="#" class="btn-neon">Saiba mais</a>
        <a href="#" class="btn-neon">Veja mais</a>

     </div>

Vamos adicionar o Css

Nesta seção, usaremos algumas propriedades CSS para projetar o botão e usaremos a classe hover para obter o efeito de animação quando passarmos o mouse sobre o botão.

.btn {

  display:inline-block;
  width:100%;
  height:auto;
  position:relative;

}


.btn-neon{
  
  color:#fffb00;
 
}

.btn-neon{

  float:left;
  display:flex;
  padding:15px 25px;
  font-size:1em;
  margin-left:10px;
  text-transform:uppercase;
  text-decoration:none;
  background:transparent;
  outline:none;
  cursor:pointer;
  border:2px solid transparent;
  border-radius:4px;
  transition:400ms;

}

.btn-neon:hover{

  border: 2px solid;
  box-shadow: 0 0 8px;

}

.btn-neon:focus{

  color:#000;
  border: 2px solid #fffb00;
  background:#fffb00;
  box-shadow: 0 0 18px #fffb00;

}

Nesta seção, combinaremos as duas seções acima para criar um botão de luz de Neon Utilizando HTML e CSS.

Código Completo Veja o Resultado! 

Baixar Código Veja Funcionando