Botão pulsante css

Botão pulsante css

Neste tutorial veja como criar um efeito de botão pulsante com html e css.

Nesta seção, projetaremos uma estrutura simples na tag <a>. 

temos dentro da tag <a> a class (.botao) e (.animation) e a tag <i> para inserir o icone desejado.

Com a tag de link <a> usaremos para criar o nosso Botão pulsante.

Vamos Adicionar o HTML

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
     <a href="#" class="botao animation">  
       <i class="fa fa-whatsapp"></i>
     </a>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar e animar o nosso Botão com efeito pulsante.

.animation {

  animation: alerta 1.5s infinite;

}

.botao {

  background: #09a513;
  color: white;
  border: 1px solid #09a513;
  border-radius: 70px;
  box-shadow: 0 0 0 0 rgba(9, 165, 19, 0.50);
  font-size: 30px;
  display: inline-block;
  text-align: center;
  width: 60px;
  height: 60px;
  line-height: 55px;
  text-decoration: none;
  transition: background, padding 500ms ease-in-out;  

}

@keyframes alerta {
  0% {
    transform: scale();
  }
  70% {
    transform: scale();
    box-shadow: 0 0 0 50px rgba(69, 152, 27, 0);
  }
    100% {
    transform: scale();
    box-shadow: 0 0 0 0 rgba(69, 152, 27, 0);
  }
}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando