Botão Neon Piscando Css3

Botão Neon Piscando Css3

O efeito de animação do botão neon piscando pode ser facilmente gerado aplicando HTML e CSS. 

Usando HTML vamos criar a estrutura básica do botão com a class=”box-btn” e  class=”neon” no html e então usando as propriedades do CSS, podemos criar o efeito de animação de luz piscando.

Vamos adicionar o Código Html

Nesta seção, projetaremos uma estrutura simples do botõ usando class=”neon” no html.

   <div class="box-btn">
                    
      <a href="#" class="neon" title="Saiba mais"> <i class="icon icon-caret-right"></i> Saiba mais</a>
                
  </div>

Vamos adicionar o Css

Nesta seção, usaremos algumas propriedades CSS para projetar o botão e usaremos a classe class=”neon” para obter o efeito de animação.

.box-btn {
 
  height: 100%;
  display: flex;
  align-items: center; 

}

.neon {

  display: block;
  margin: auto;
  padding: 0.5em 1.5em;
  font-family: 'open_sansregular';
  font-size: 1.5em;
  text-decoration: none;
  text-shadow:-2px 4px 4px #091243, 0 0 10px #6CE8EB, inset 1px 1px 1px white;
  color: #6CE8EB;
  border: 2px solid;
  border-radius: 50px;
  background-color: transparent;
  box-shadow: 
    0 1px 2px rgba(0,0,0, 0.6), 
    2px 1px 4px rgba(0,0,0, 0.3), 
    2px 4px 3px rgba(3,0,128, 0.3), 
    0 0 7px 2px rgba(0,208,255, 0.6), 
    inset 0 1px 2px rgba(0,0,0, 0.6), 
    inset 2px 1px 4px rgba(0,0,0, 0.3), 
    inset 2px 4px 3px rgba(3,0,128, 0.3), 
    inset 0 0 7px 2px rgba(0,208,255, 0.6);
  animation: piscando 5s infinite;

}

@keyframes piscando {
  0% {
    border-color: transparent;
    opacity: 0.1;
  }
  
  2% {
    border-color: #6CE8EB;
    opacity: 1;
  }
  
  4% {
    border-color: transparent;
    opacity: 0.5;
  }
  
  8% {
    border-color: #6CE8EB;
    opacity: 1;
  }
  
  28% {
    border-color: #6CE8EB;
    opacity: 1;
  }
  
  30% {
    border-color: transparent;
    opacity: 0.5;
  }
  
  36% {
    border-color: #6CE8EB;
    opacity: 1;
  }
  
  100% {
    border-color: #6CE8EB;
    opacity: 1;
  }
}

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

Código Completo Veja o Resultado do Botão Neon Piscando Css3! 

Baixar Código Veja Funcionando