Gradiente animado no link html css

Gradiente animado no link html css

Este tutorial mostra como criar um Gradiente animado no link com html e css.

Nesta seção, projetaremos uma estrutura simples na tag <div>.  

temos dentro da tag <div> a class (.link-animado) na tag <a>

Com a tag de link <a> usaremos para criar o nosso Link animado.

Vamos Adicionar o HTML

  <div class="link-animado">
                    
    <a href="#">Gradiente animado no link html css.<br> Loop Nerd - Códigos Html e Css</a>
                
  </div>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Link.

.link-animado {

  width: 100%;
  height: auto;
  display: block;

}

.link-animado a {

  transition: all 0.3s linear;
  display: inline;
  font-size: 1.2em;
  line-height: 32px;
  color: #242424;
  font-family: 'open_sansregular';
  text-decoration: none;
  padding-bottom: 5px;
  background: linear-gradient(to right, #dc5757 0%, #f9f501 98%);
  background-size: 0px 2px;
  background-repeat: no-repeat;
  background-position: left 85%;
}

.link-animado a:hover {

  background-size: 100% 2px;

}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando