Como fazer um botão animado com html e css

Como fazer um botão animado com html e css

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

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

temos dentro da tag <div> a tag <a>.

Essas tags usaremos para criar o nosso Botão animado com html e css.

Observem que usamos uma (class com o nome box-btn) para centralizar o botão

e também usamos uma (class com o nome link) para estilizar o href.

Vamos Adicionar o HTML

  <div class="box-btn">

     <a href="#" class="btn elastico">Leia mais...</a>
                    
  </div>

Vamos Adicionar o CSS

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

.box-btn { text-align:center; }

.btn {

  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  font-size: inherit;
  font-family: inherit;

}

.btn.elastico {
  
  transition: all 0.6s cubic-bezier(0.65, -0.25, 0.25, 1.95);
  font-size:0.9em;
  font-family: 'open_sansregular';
  color: #ccc;
  padding: 0.8em 1.2em;
  background: #242424;
  text-transform: uppercase;

}

.btn.elastico:hover, .btn.elastico:focus, .btn.elastico:active {
  
  letter-spacing: 0.220rem;

}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando