Link Css Html com Degradê Animado

Link Css Html com Degradê Animado

Este tutorial mostra como criar um link animado com degradê com HTML e Css.

Nesta seção, projetaremos uma estrutura simples na tag <a href=”#” class=”link”>. 

temos dentro da tag <p>  inserimos a tag <a> para criar o link. Essas tags usaremos para criar o nosso link animado.

Vamos Adicionar o HTML

    <p>
      Códigos <a class="link" href="#" target="_blank" title="Html e Css">Html e Css</a> Prontos.<br> 
      aprendar a programar pagina web do basico ao avançado. 
    </p>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para projetar o nosso link animado.

p { 

    width: 100%;
    float: left;
    text-align: center;
    margin-bottom: 10px;
    font-size: 1em;

}

.link {

   text-decoration: none;
   line-height: 1;   
   position: relative;
   z-index: 0;
   display: inline-block;
   padding: 4px 4px;
   overflow: hidden;
   color: #242424;
   vertical-align: bottom;
   transition: color .3s ease-out;

}

.link::before {

   content: "";
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
   transform: translateY(calc(100% - 2px));
   width: 100%;
   height: 100%;
   background-image: linear-gradient(60deg, #046a93 0%, #58eaf7 100%);
   transition: transform .30s ease-out;

}

.link:hover { color:#fff; }

.link:hover::before {

   transform: translateY(0);
   transition: transform .30s ease-out;

}

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

Veja o Resultado baixo

Baixar Código Veja Funcionando