- Página Inicial
- Códigos CSS Prontos
- Link hover – Efeito down
- Voltar
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
<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.
: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