Link Animado Linha Esquerda e Direita

Link Animado Linha Esquerda e Direita

Neste tutorial veremos como criar um link animado com duas linhas com efeito para esquerda e direita 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 line.

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

Vamos Adicionar o HTML

<a href="#" class="link line">Saiba mais...</a>

Vamos Adicionar o CSS

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

.link {

    cursor: pointer;
    font-size: 16px;
    position: relative;
    white-space: nowrap;
    color: #242424;
    text-decoration: none;
    transition: .4s;

}

.link:hover { color: #59d4da; }

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

    position: absolute;
    width: 100%;
    height: 1px;
    background: #59d4da;
    top: 100%;
    left: 0;
    pointer-events: none;

}

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


/*Animação Linhas*/
.line { font-family: 'open_sansregular'; }

.line::before {
    
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);

}

.line:hover::before {
    
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
    transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);

}

.line::after {
    
    content: '';
    top: calc(100% + 4px);
    transform-origin: 0% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);

}

.line:hover::after {
    
    transform-origin: 100% 50%;
    transform: scale3d(1, 1, 1);
    transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);

}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando