Link Efeito Reflexo com Css

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