PESQUISA PERSONALIZADA

HTML e CSS Pro -  O melhor Portal para se aprender HTML e CSS na prática.

Home HTML Animação de Link Sublinhado

Animação de Link Sublinhado

HTML Luiz Augusto Vieira  

Animação de Link Sublinhado
  • Compartilhe esse post
  • Compartilhar no Facebook00
  • Compartilhar no Google Plus00
  • Compartilhar no Twitter

Neste poste, vamos fazer um efeito que ao passar o Mouse sobre o Link, o Underline aparecerá animando no footer do mesmo.

Vamos começar pelo CSS abaixo:

body{
  margin: 0;
  padding: 0;
  font-family: arial; sans-serif;
  font-size: 14px;
}
 
h1{
  background: #333;
  float: left;
  margin: 20px;
  padding: 20px 30px;
}

Demos os estilos ao ( body ) e ao ( h1 ) onde envolveremos nosso link.

a {
  position: relative;
  color: #fff;
  text-decoration: none; 
}

Estilizamos o link ( a ) e tiramos o ( underline ) do mesmo, para não ficar com a linha abaixo. Perceba que setamos a posição do link como relativa ( position: relative ), pois vamos criar um elemento absoluto ( position: absolute ) dentro do mesmo.

a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

Criamos o elemento para animar todas as mudanças aplicadas, com uma duração de 0.3 segundos.

a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

Para que a animação apareça, agora só precisamos tornar o elemento novamente visível ( visibility: visible ) ao passar o mouse sobre ele e mudar sua escala X para 1 ( transform: scaleX(1) ).

<h1>
  <a href="#">
    Passe o mouse sobre este link
  </a>
</h1>

Acima está o HTML.

Veja o resultado final:

  • Compartilhe esse post
  • Compartilhar no Facebook00
  • Compartilhar no Google Plus00
  • Compartilhar no Twitter

ATÉ O PRÓXIMO POST

Sentiu falta de alguma coisa óbvia? Comente, dei sua opinião, ajude a divulgar o Blog.

Inscreva-se no Youtube: https://www.youtube.com/htmlecsspro

Curta nossa Fanpage: https://www.facebook.com/htmlecsspro

Entre para o nosso Grupo: https://www.facebook.com/groups/htmlecsspro

Olá, deixe seu comentário para Animação de Link Sublinhado

Já temos 3 comentário(s). DEIXE O SEU :)
Caio Rocha

Caio Rocha

Perfeito! Só faltou ensinar como deixa o sublinhado mais em baixo, mais em cima ou menor.

Para deixar a linha em um tamanho menor eu utilizei:

.navbar li:hover:before{
visibility: visible;
transform: scaleX(0.5);
}
★★★★★DIA 11.01.20 22h40RESPONDER
N/A
Enviando Comentário Fechar :/
Gabriela M

Gabriela M

Bom tutorial, obrigada!
★★★★★DIA 20.03.19 20h24RESPONDER
N/A
Enviando Comentário Fechar :/
Luiz Augusto  Vieira

Luiz Augusto Vieira

Olá Gabriela M, obrigado pelo feedback!

★★★★★DIA 21.03.19 08h33RESPONDER
N/A
Enviando Comentário Fechar :/
Enviando Comentário Fechar :/