Hover Line Transition

Hover Line Transition

Neste artigo vamos fazer um link com uma linha em transição quando passamos o mouse sobre o link.

Vamos adicionar o Html:

 <div class="btn-line">
    
    <a href="#" title="Saiba mais...">Leia mais...</a>
    <div class="line"></div>

 </div>

Vamos Adicionar o Css:

.btn-line {

    font-family: 'open_sansregular';
    position: relative;
    transform: translate(-50%, -50%);
    color: #333333;
    font-size:1.3em;
    cursor: pointer;
    border-bottom: 2px solid #333333;
    display: inline;
}

.btn-line a { 

    text-decoration:none; 
    color: #333333;
    transition:0.4s;

}

.btn-line a:hover { color:#fb7804; }

.btn-line .line {
  
  width:0%;
  height:2px;
  position: absolute;
  background: #fb7804;
  left:0;
  display:block;
  transition:width 0.5s ease;
  z-index:1;
}
.btn-line:hover .line {
  width: 100%;
}

Veja o Resultado!

Baixar Código Veja Funcionando