Link animado efeito corte no texto

Link animado efeito corte no texto

Neste tutorial veremos como criar um link animado efeito corte 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 com nome de link e com nome de corte.

Essas tags usaremos para criar o nosso link com corte no texto com html e css.

Vamos Adicionar o HTML

<a href="#" class="link corte"> <span>Leia mais</span> </a>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar a nosso  link com efeito de corte no texto com css e html.

.link {

    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    white-space: nowrap;
    color: #242424;
}

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

    position: absolute;
    width: 100%;
    height: 1px;
    background: #38cff2;
    top: 100%;
    left: 0;
    pointer-events: none;
    z-index: 1;

}

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

.corte {

    padding: 0 10px;
    font-family: 'open_sansregular';
    letter-spacing: 3px;
    text-indent: 1px;
}

.corte::before {
    top: 50%;
    height: 2px;
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s cubic-bezier(0.4, 1, 0.8, 1);
}

.corte:hover::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}

.corte span {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.4, 1, 0.8, 1);
}

.corte:hover span {
    transform: scale3d(1.1, 1.1, 1.1);
}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando