- Página Inicial
- Códigos CSS Prontos
- Link Efeito Reflexo com Css
- Voltar
Link Efeito Reflexo com Css
Este tutorial mostra como criar um Efeito Reflexo com HTML e Css.
Nesta seção, projetaremos uma estrutura simples na tag <a>.
temos dentro da tag <a> a class=”link-reflexo”. Essas tags usaremos para criar o nosso Efeito de REflexo
no link.
Vamos Adicionar o HTML
<a href="#" class="link-reflexo" title="Leia mais"> Leia mais</a>
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para projetar o nosso Efeito Reflexo com o Css
.
.link-reflexo { display: inline-block; position: relative; padding: 0 1px; text-decoration: none; color: #4c4c4c; transition: color ease 0.2s; } .link-reflexo::before, .link-reflexo::after { content: ''; position: absolute; background-color: #242424; z-index: 1; height: 2px; } .link-reflexo::before { width: 0%; left: 0; bottom: 0; transition: width ease 0.3s; } .link-reflexo::after { width: 100%; left: 0; bottom: -1px; transition: all ease 0.4s; } .link-reflexo:hover::before { width: 100%; } .link-reflexo:hover::after { left: 100%; width: 0%; transition: all ease 0.2s; }
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
458 Visualizações
Deixe um comentário