Botão efeito pulse css

Botão efeito pulse css

Como fazer um botão animado?

Este tutorial mostra como criar um Botão com efeito pulsar com html e css.

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

temos dentro da tag <a> a class (.btn)

Com a tag de link <a> usaremos para criar o nosso Botão com efeito de pulsar.

Vamos Adicionar o HTML

<a class="btn"> Saiba mais</a>

Vamos Adicionar o CSS

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

.btn{

  position: relative;
  background-color: black;
  border-radius: 50px;
  font-size: 18px;
  color: #ffffff;
  padding: 0.5em 1.2em;
  cursor:pointer;
  user-select:none;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;

}

.btn:hover {

  transition-duration: 0.1s;
  background-color: #3A3A3A;

}

.btn:after {

  content: "";
  display: block;
  position: absolute;
  border-radius: 50px;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s;
  box-shadow: 0 0 10px 60px #fd6f61;

}

.btn:active:after {

  box-shadow: 0 0 0 0 #fd6f61;
  position: absolute;
  border-radius: 50px;
  left: 0;
  top:0;
  opacity: 1;
  transition: 0s;

}

.btn:active {

  top: 2px;
  background-color:#fd6f61;

}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando