Link Animado com efeito de duas linhas

Link Animado com efeito de duas linhas

Neste tutorial veremos como criar um link animado com duas linhas 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 linhas"> Leia 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: 18px;
    position: relative;
    white-space: nowrap;
    color: #242424;
    text-decoration: none;

}

.link::before,
.link::after {
    position: absolute;
    width: 100%;
    height: 1px;
    background: currentColor;
    top: 100%;
    left: 0;
    pointer-events: none;
}

.link::before {
    content: '';
    /* show by default */
}

/*Linhas Animadas*/

.linhas {
    font-family: angie-sans, sans-serif;
    text-transform: uppercase;
}

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

.linhas:hover::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 2, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
}

.linhas::after {
    content: '';
    top: calc(100% + 4px);
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.4s 0.1s cubic-bezier(0.2, 1, 0.8, 1);
}

.linhas:hover::after {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando