Botão Hover Transition

Neste artigo vamos fazer um Botão Hover Transition com css.

Hover Transition é um efeito de transição quando passamos o mouse sobre o link.

Veja o exemplo abaixo.

Vamos Adicionar o Link no Html:

<a href="#" class="link"> <span><i class="icon icon-forward-1"></i> Saiba mais... </span> </a> 
              
<a href="#" class="btn-quadrado"> <span> <i class="icon icon-forward-1"></i> Hover Me</span> </a>
              
<a href="#" class="btn-redondo"> <span> <i class="icon icon-forward-1"></i> Saiba mais...</span> </a>
 

Vamos adicionar o Css para estilizar o nosso Link:

/*Link Hover Trasition*/
.link {

  text-decoration: none;
  color:#4c4c4c;
  position: relative;
  font-size: 1em;
  padding: 0.4em 1.3em;
  overflow:hidden;
  display:inline-block;
  transition:0.4s;

}

.link:hover { color: #ffffff; }

.link span { 

    background-color: ;
    z-index: 2;
    position: relative;
    left: 0;
    top: 0; 
} 

.link span i    { font-size:0.6em; margin-right:5px; }

.link::before {
  transform: scaleX(0);
  transform-origin: bottom right;
}

.link:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.link::before {
  content: "";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background: hsl(199.8, 100%, 50%);
  z-index:1;
  transition: transform .3s ease;
}

/*Botão Redondo Hover Trasition*/
.btn-redondo {

  text-decoration: none;
  color:#ffffff;
  background-color:#4c4c4c;
  position: relative;
  font-size: 1em;
  padding: 0.4em 1.3em;
  border-radius:50px;
  overflow:hidden;
  display:inline-block;
  transition:0.4s;

}

.btn-redondo:hover { color:#ffffff; }

.btn-redondo span { 

    background-color: ;
    z-index: 2;
    position: relative;
    left: 0;
    top: 0; 
} 

.btn-redondo span i    { font-size:0.6em; margin-right:5px; }

.btn-redondo::before {
  border-radius:50px;  
  transform: scaleX(0);
  transform-origin: bottom right;
}

.btn-redondo:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.btn-redondo::before {
  content: "";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background: hsl(199.8, 100%, 50%);
  z-index:1;
  transition: transform .3s ease;
}

/*Botão Quadrado Hover Trasition*/
.btn-quadrado {

  text-decoration: none;
  color:#ffffff;
  background-color:#4c4c4c;
  position: relative;
  font-size: 1em;
  padding: 0.4em 1.3em;
  overflow:hidden;
  display:inline-block;
  transition: 0.4s;

}

.btn-quadrado:hover { color:#ffffff; }

.btn-quadrado span { 

    background-color: ;
    z-index: 2;
    position: relative;
    left: 0;
    top: 0; 
} 

.btn-quadrado span i    { font-size:0.6em; margin-right:5px; }

.btn-quadrado::before {
  transform: scaleX(0);
  transform-origin: bottom right;
}

.btn-quadrado:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.btn-quadrado::before {
  content: "";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background: hsl(199.8, 100%, 50%);
  z-index:1;
  transition: transform .3s ease;
}

Veja o Resultado !

Baixar Código Veja Funcionando