Carregando...

Link hover – Efeito down

Postado: 14 de novembro de 2022 Tempo de Leitura: < 1 Minuto

Link hover – Efeito down

Neste tutorial veja como criar um link animado com efeito down com Css e Html.

Nesta seção, projetaremos uma estrutura das seguintes tags abaixo. 

Tag: <span> e a tag <a> para inserirmos o endereço no link.

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

Vamos Adicionar o HTML

HTML
<a href="#" class="link link--down"><span> Leia mais</span></a>

Vamos Adicionar o CSS

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

CSS
:root {

    --cor-preto: #4c4c4c;
    --cor-azul:#07e2ea;
}

.link {
    cursor: pointer;
    font-size: 18px;
    position: relative;
    white-space: nowrap;
    color: var(--cor-preto);
}

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

.link::before {

    content: '';

}

.link--down {

    font-family: 'open_sansregular';
    font-weight: bold;

}

.link--down::before {

    height: 7px;
    border-radius: 20px;
    transform: scale3d(1, 1, 1);
    transition: transform 0.2s, opacity 0.2s;
    transition-timing-function: cubic-bezier(0.2, 0.57, 0.67, 1.53);

}

.link--down:hover::before {
    color: var(--cor-azul);
    transition-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
    transition-duration: 0.4s;
    opacity: 1;
    transform: scale3d(1.2, 0.1, 1);

}

.link--down span {
    
    transform: translate3d(0, -4px, 0);
    display: inline-block;
    transition: transform 0.2s 0.05s cubic-bezier(0.2, 0.57, 0.67, 1.53);

}

.link--down:hover span {
    
    color:var(--cor-azul);
    transform: translate3d(0, 0, 0);
    transition-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
    transition-duration: 0.4s;
    transition-delay: 0s;

}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando

Publicado por: Loop Nerd

259 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados