Links em CSS

Os links são fundamentais para a navegação em um site, e com CSS é possível deixá-los atraentes e funcionais, aprimorando a experiência do usuário. Neste post, vamos explorar os links em CSS, as principais técnicas de estilização, como alterar cores, adicionar efeitos ao passar o mouse e definir estados específicos.

1. Estados dos links

CSS oferece diferentes pseudoclasses para modificar os links de acordo com seus estados:

:link – links ainda não visitados.
:visited – links já visitados pelo usuário.
:hover – quando o mouse passa sobre o link.
:active – enquanto o link está sendo clicado.

Por exemplo, para dar uma cor azul ao link normal, roxo ao link visitado e vermelho ao ser clicado:

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: green;
  text-decoration: underline;
}

a:active {
  color: red;
}

2. Remover e personalizar sublinhado de links

Por padrão, os links são sublinhados, mas você pode remover ou modificar esse estilo com text-decoration. Para links sem sublinhado:

a {
  text-decoration: none;
}

Ou, para um efeito de sublinhado apenas ao passar o mouse:

a:hover {
  text-decoration: underline;
}

3. Adicionando efeitos de transição

Para criar uma animação suave ao passar o mouse, você pode adicionar transições:

a {
  color: blue;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: darkblue;
  text-decoration: underline;
}

4. Personalizando links com border

Uma técnica popular para estilizar links sem o sublinhado é usar bordas:

a {
  color: #333;
  border-bottom: 2px solid #333;
  text-decoration: none;
  transition: border-color 0.3s;
}

a:hover {
  border-color: #555;
}

5. Efeitos criativos para links

Você também pode aplicar animações e transformações nos links, como o efeito de sublinhado animado. Exemplo:

a {
  color: blue;
  position: relative;
}

a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: blue;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

a:hover::after {
  transform: scaleX(1);
}

Outro exemplo prático

Com o uso do CSS podemos aplicar vários efeitos na tag de link do HTML/XHTML (<a></a>).

Código HTML/XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<head>
 <html xmlns="estilo.css" rel="stylesheet" type="text/css" />
 <title>CSS - Dicas</title>
</head>
<body>
  <h1>Exemplo de links></h1>
  </a href="" class="ex01">Exemplo 01</a><br /><br />
  </a href="" class="ex02">Exemplo 02</a><br /><br />
  </a href="" class="ex03">Exemplo 03</a><br /><br />
 </body>
</html>

Código CSS (arquivo estilo.css):

        body 
	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-weight: bold;
	}

	a.ex01:link {text-decoration: none;}
	a.ex01:visited {text-decoration: none;}
	a.ex01:hover {text-decoration: underline;}
 
	a.ex02:link {text-decoration: none;}
	a.ex02:visited {text-decoration: none;}
	a.ex02:hover {text-decoration: underline; color: #ffff00}
 
	a.ex03:link {text-decoration: none;}
	a.ex03:visited {text-decoration: none;}
	a.ex03:hover {text-decoration: underline overline;}

A estilização de links em CSS permite criar uma navegação mais envolvente e adaptada ao design do site.

Experimente essas técnicas para dar aos links o destaque ideal e melhorar a interatividade com os usuários

QUER SER UM PROGRAMADOR FULL-STACK E DOMINAR AS PRINCIPAIS TECNOLOGIAS DO MERCADO?

Aprenda através de projetos reais e aulas práticas. São 20 cursos completos + cursos bônus. Grupos privados exclusivos, atualizações constantes e lives semanais.

Python, PHP, Java Script, CSS, Node, Angular JS, MySQL, Photoshop, Flutter, AWS, Apache e muito mais!

CLIQUE NA IMAGEM ABAIXO E CONFIRA MAIS DETALHES: