Botão Hover com Css

Como criar efeitos de hover com css em botões para sites e blogs.

Hover é um seletor CSS usado para selecionar elementos quando você passa o mouse sobre eles.

Para entendermos melhor, veja o exemplo a abaixo:

Vamos Adicionar o Html:

<div class="btn-box">

   <a href="https://www.loopnerd.com.br" class="btn-link btn-hover" title="Loop Nerd">
   <span class="btn-hover-texto">Saiba mais...</span>
   <span class="btn-hover-texto"> Loop Nerd </span>
   </a>

</div>

Vamos Adicionar o Css:

.btn-box { 

  width:auto; 
  height:auto; 
  float:left; 
  display:block; 
  margin-right:5px; 

}

.btn-link {

  background-color: transparent;
  border:2px solid #2fcacf;
  border-radius:50px;
  display:inline-block;
  text-decoration: none!important;
  color:#2fcacf;
  cursor:pointer;
  font-size:1em;
  font-weight: 600;
  height:40px;
  line-height:38px;
  overflow:hidden;
  text-align: center;
  transition: all .2s ease-in-out;

}

.btn-link:hover              { background-color:#2fcacf; }

.btn-link:active             { background-color:#97e1e3; border:2px solid #97e1e3;}

.btn-hover-texto             { 

  display:block; 
  padding:0px 15px; 
  position:relative; 
  transition:all 370ms cubic-bezier(0.177, 0.887, 0.32, 1.277); 
}

.btn-hover-texto:last-child { color:#fff; }
.btn-hover:hover .btn-hover-texto:first-child { margin-top:-38px; }
.btn-hover:hover .btn-hover-texto:active { margin-top:5px; }

Baixar Código Veja Funcionando