Link animado com efeito slide no texto

Link animado com efeito slide no texto

Neste tutorial veremos como criar um link animado com efeito slide no texto com Css e Html.

Nesta seção, projetaremos uma estrutura com a tag abaixo. 

Usaremos A Tag <a> para inserirmos o LINK de destino com as class link e link-slide.

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

Vamos Adicionar o HTML

 <a href="#" class="link link-slide" data-text="Saiba mais">
   <span>Saiba mais</span>
 </a>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar a nosso  link animado com css e html.

.link {
    
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    white-space: nowrap;
    color: #242424;
    font-family: 'open_sansregular';
    text-decoration: none;

}

.link::before,
.link::after {

    position: absolute;
    width: 100%;
    height: 2px;
    background: #00c6ce;
    top: 100%;
    left: 0;
    pointer-events: none;

}

.link::before { content:''; }

.link-slide {
    
    overflow: hidden;
    line-height: 2;
    padding: 0px 5px;
}


.link-slide::before {

    height: 2px;
    top: calc(100% - 5px);
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);

}

.link-slide:hover::before {

    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);

}

.link-slide::after {

    content: attr(data-text);
    height: 100%;
    top: 0;
    background: none;
    transform-origin: 100% 50%;
    transform: translate3d(150%, 0, 0);
    transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);

}

.link-slide:hover::after { transform: translate3d(0, 0, 0); }

.link-slide span {
    
    font-family: 'open_sansregular';
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);

}

.link-slide:hover span {
    transform: translate3d(-150%, 0, 0);
}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando