Link HTML CSS Animado

Link HTML CSS animado- Animação de Link sublinhado

Neste tutorial, vamos fazer links com efeitos animados quando passamos o Mouse sobre o Link com HTML e CSS.

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

temos dentro da tag <p> as tags <a> e <span>.

Essas tags usaremos para criar o nossos links animados.

Vamos Adicionar o HTML

    <p class="paragrafo">
         Códigos <a href="#" class="link-zoom" title="Html e Css">Html e Css </a> Prontos. 
         Aprenda a <a href="#" class="link-linha" title="usar">Programar Páginas Web</a> do zero.  
    </p>

    <p class="paragrafo">
        Para <a href="#" class="link-anima-up"><span>Agilizar o Seu </span></a> Tempo. 
        E mais <a href="#" class="link-anima-right"><span>Templates Html e Css</span></a> Gratuitos
    </p>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar os nossos links com css.

.paragrafo { line-height:25px; margin-bottom:10px; text-align: center; }

a {
  text-decoration: none;
  color: inherit;
  position: relative;
  cursor: pointer;
}


.link-linha::after {

  content: " ";
  position: absolute;
  top: 100%;
  left: 25%;
  width: 50%;
  height: 1px;
  font-weight: bold;
  border-bottom: 1px solid #59d4d9;
  transition: 0.4s;

}

.link-linha:hover::after {

  width: 100%;
  left: 0;
  color: #59d4d9;

}

.link-linha:hover {

  color: #59d4d9;
  transition: 0.4s;

}

/* --------------------------- */

.link-anima-up::after {

  content: "";
  position: absolute;
  z-index: 1;
  top: 100%;
  left: -2px;
  padding: 0 2px;
  width: calc(100% + 2px);
  height: 1px;
  border-bottom: 1px solid #59d4d9;
  transition: 0.4s;

}

.link-anima-up:hover::after {

  top: 0;
  height: 1.5em;
  background-color: #59d4d9;
  border-color: transparent;

}

.link-anima-up:hover { color: #fff; transition: 0.4s; }
.link-anima-up span  { position: relative; z-index: 2; }

/*------------------------------*/

.link-anima-right::before {

  content: " ";
  position: absolute;
  z-index: 1;
  top: 100%;
  left: -2px;
  padding: 0 2px;
  width: calc(100% + 2px);
  height: 1px;
  border-bottom: 1px solid #f4c50b;
  transition: 0.4s;

}

.link-anima-right::after {

  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: -2px;
  padding: 0 2px;
  width: 1px;
  height: 1.5em;
  transition: 0.4s;

}

.link-anima-right:hover::after {

  width: 100%;
  background-color: #f4c50b;

}

.link-anima-right:hover { color: #fff; transition: 0.4s; }
.link-anima-right span  { position: relative; z-index: 2; }

/*---------------------------------*/

.link-zoom::before {

  content: " ";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: -2px;
  padding: 0 2px;
  width: calc(100% + 2px);
  height: 1px;
  border-bottom: 1px solid #ee2727;
  transition: 0.4s;

}

.link-zoom::after {

  content: " ";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: calc(50% - 4px);
  padding: 0 2px;
  width: 0;
  height: 0;
  border: 1px solid transparent;
  transition: 0.4s;

}

.link-zoom:hover::before {

  border-color: transparent;

}

.link-zoom:hover::after {

  width: 100%;
  height: 1.25em;
  left: -1em;
  bottom: -0.35em;
  padding: 0.5em 1em;
  border-color: #ee2727;
  background-color: #ee2727;
  border-radius: 2.5em;
}


.link-zoom {

  display: inline-block;
  transition: 0.3s;
  transition-delay: 0s;
  transform: scale(1);

}

.link-zoom:hover {

  color: #fff;
  transform: scale(1.5);
  transition-delay: 0.11s;

}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando