Link Animado Efeito Up

Link Animado Efeito Up

Neste tutorial vamos criar um link animado efeito up 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-up.

Essa tag usaremos para criar o nosso Link Up com html e css.

Vamos Adicionar o HTML

<a href="#" class="link link-up"> Leia mais </a>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar a nosso Link Efeito Up com css e html.

.link {

    cursor: pointer;
    font-size: 1.2em;
    position: relative;
    white-space: nowrap;
    color: #242424;
    text-decoration: none;
    transition: .3s;

}

.link:hover { color:#ff9d35; }

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

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

}

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

.link-up {
    
    font-family: 'open_sansregular';    

}

.link-up::before {
    height: 15px;
    top: 100%;
    opacity: 0;
}

.link-up:hover::before {
    opacity: 1;
    animation: lineUp 0.3s ease forwards;
}

@keyframes lineUp {
    0% {
        transform-origin: 50% 100%;
        transform: scale3d(1, 0.045, 1);
    }

    50% {
        transform-origin: 50% 100%;
        transform: scale3d(1, 1, 1);
    }

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

    100% {
        transform-origin: 50% 0%;
        transform: scale3d(1, 0.045, 1);
    }
}

.link-up::after {
    content: '';
    transition: opacity 0.3s;
    opacity: 0;
    transition-delay: 0s;
}

.link-up:hover::after {
    opacity: 1;
    transition-delay: 0.3s;
}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando