Botão Efeito Bounce com Css

Neste artigo vamos fazer um botão Efeito Bounce com Css.

Vamos adicionar o html:

<div class="box-btn">
  <div class="btn-bounce bg-laranja">
    <a href="#"><i class="icon icon-code"></i> Html</a>
  </div>
</div><!--Box Btn-->

<div class="box-btn">
  <div class="btn-bounce bg-azul">
    <a href="#"><i class="icon icon-paint-brush"></i> Css</a>
  </div>
</div><!--Box Btn-->

<div class="box-btn">
  <div class="btn-bounce bg-vermelho">
    <a href="#"><i class="icon icon-coffee"></i> Saiba mais</a>
  </div>
</div><!--Box Btn-->

Vamos adicionar o css:

.box-btn {
    
    width:11em;
    margin: 0 auto;

}


.btn-bounce {

    width:100%;
    height: 40px;
    margin: 0em 0em 0.630em;
    text-align: center;
    border-radius: 6px;
    transition:.3s;

}

.bg-vermelho { background-color:#ce1d1d; }
.bg-laranja  { background-color:#ff9000; }
.bg-azul     { background-color:#00a2ff; }

.btn-bounce a {
   
    font-family:'open_sansregular';
    font-size: 1em;
    padding: 0.6em;
    letter-spacing: 2px;
    text-shadow: 0em 0em 0.189em #393939;
    -webkit-font-smoothing: antialiased;
    color: #fff;
    text-decoration: none;
    display: block;

}

.btn-bounce:hover {

        background: #111111;
    -webkit-animation: bounce 0.9s ease-out;
        animation: bounce 0.9s ease-out;
}

@-webkit-keyframes bounce {
    0% { -webkit-transform: scale(1.0); }
   10% { -webkit-transform: scale(1.2); }
   20% { -webkit-transform: scale(1.3); }    
   30% { -webkit-transform: scale(1.2); }
   40% { -webkit-transform: scale(1.0); } 
   50% { -webkit-transform: scale(1.1); }
   60% { -webkit-transform: scale(1.0); } 
   70% { -webkit-transform: scale(1.05);}
   80% { -webkit-transform: scale(1.0); } 
   90% { -webkit-transform: scale(1.02);}    
  100% { -webkit-transform: scale(1.0); }   
}

@keyframes bounce {
    0% { transform: scale(1.0); }
   10% { transform: scale(1.2); }
   20% { transform: scale(1.3); }    
   30% { transform: scale(1.2); }
   40% { transform: scale(1.0); } 
   50% { transform: scale(1.1); }
   60% { transform: scale(1.0); } 
   70% { transform: scale(1.05);}
   80% { transform: scale(1.0); } 
   90% { transform: scale(1.02);}    
  100% { transform: scale(1.0); }    
}

Veja o Resultado!

Baixar Código Veja Funcionando