Estilos CSS para Links

Um link (o elemento HTML <a>) é um dos elementos mais clicados em qualquer página, por isso sua estilização importa tanto para a aparência quanto para a usabilidade. Neste capítulo, explicaremos como estilizar links com CSS e torná-los claros, acessíveis e visualmente atrativos.

Os Estados do Link (Pseudo-classes)

O CSS expõe um link por meio de cinco pseudo-classes, cada uma correspondendo ao link em um estado específico:

a:link — um link normal, não visitado
a:visited — um link que o usuário já visitou
a:hover — um link com o mouse sobre ele
a:active — um link no momento em que é clicado
a:focus — um link que recebeu foco pelo teclado (por exemplo, via a tecla Tab)

Você pode selecionar qualquer um desses estados individualmente, mas quando estiliza vários ao mesmo tempo a ordem é importante. Como :hover, :active e :visited têm a mesma especificidade, uma regra posterior substitui uma anterior. A ordem convencional e funcional é LVHA — :link, :visited, :hover, :active:

a:link    { color: #1c87c9; }  /* normal   */
a:visited { color: #8e44ad; }  /* visited  */
a:hover   { color: #f4511e; }  /* mouse over */
a:active  { color: #c0392b; }  /* clicked  */

Se você colocar :hover antes de :visited, a cor de hover nunca apareceria em links visitados. Um recurso mnemônico útil é "LoVe HAte." Adicione :focus (geralmente junto com :hover) para que usuários de teclado recebam o mesmo feedback que os usuários de mouse — deixar isso de fora é um erro de acessibilidade comum.

Abordaremos as três propriedades mais usadas para estilizar links:

Text Decoration

Por padrão, o navegador exibe um sublinhado em todos os links. Para alterar ou remover isso, use a propriedade text-decoration. Definir text-decoration: none remove o sublinhado; restaurá-lo com underline no :hover é um padrão popular que mantém a página organizada enquanto ainda sinaliza a possibilidade de clicar na interação.

Uma observação importante: remover completamente o sublinhado pode dificultar a identificação dos links, especialmente para usuários que não percebem cores bem. Se você o remover, destaque os links de outra forma — com uma cor distinta, um font-weight, ou restaurando o sublinhado no hover e no focus.

Exemplo de uso da propriedade text-decoration para estilizar um link:

Exemplos de text-decoration em links CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link {
        text-decoration: none;
      }
      a:visited {
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      a:active {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <a href="#"> This is some link.</a>
  </body>
</html>

Experimente Você Mesmo »

Vamos explicar o significado do nosso código.

Aqui você pode ver que o link em seu primeiro e segundo estados não terá sublinhado. O link fica sublinhado quando o usuário passa o mouse sobre ele ou clica nele.

Você pode verificar isso no seu navegador usando seus editores ou nosso editor online.

Esses estilos podem ser escritos na seção <head> ou em um arquivo CSS que você usará para sua página web.

Color

Usamos a propriedade color para definir a cor de um link.

Por exemplo, se quisermos que nosso link seja preto por padrão e #1c87c9 em seu terceiro estado (a:hover), precisamos escrever o seguinte:

Exemplo de uso da propriedade color para estilizar um link:

Exemplos de color em links CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link {
        color: #000000;
      }
      a:visited {
        color: #000000;
      }
      a:hover {
        color: #1c87c9;
      }
      a:active {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a href="#">This is some link.</a>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Background Color

O que podemos fazer se quisermos que nosso link tenha um background?

Precisamos apenas aplicar a propriedade background-color.

Por exemplo, nosso link terá um fundo cinza e, ao passar o mouse, mudará para #1c87c9.

Quando o primeiro (a:link) e o segundo (a:visited) estados têm a mesma cor de fundo, podemos simplesmente usar a.

Exemplo de uso da propriedade background-color para estilizar um link:

Exemplos de background-color em links CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        background-color: #555555;
      }
      a:hover {
        background-color: #1c87c9;
      }
      a:active {
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a href="#">This is some link.</a>
  </body>
</html>

Experimente Você Mesmo »

Você pode escolher sua cor preferida usando o Seletor de Cores.

Combinando Tudo

Em projetos reais, raramente você estiliza apenas uma propriedade. O exemplo abaixo combina cor, o padrão de sublinhado no hover, um pequeno padding para que o fundo tenha espaço para respirar, e uma regra :focus que espelha :hover para que usuários de teclado recebam feedback visível:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link,
      a:visited {
        color: #1c87c9;
        text-decoration: none;
        padding: 2px 4px;
        border-radius: 4px;
      }
      a:hover,
      a:focus {
        color: #ffffff;
        background-color: #1c87c9;
        text-decoration: underline;
      }
      a:active {
        color: #ffffff;
        background-color: #14679b;
      }
    </style>
  </head>
  <body>
    <a href="#">This is some link.</a>
  </body>
</html>

Observe como agrupar a:link, a:visited com uma vírgula aplica o mesmo padrão a ambos os estados, e como combinar a:hover, a:focus mantém a experiência idêntica para usuários de mouse e teclado.

Dicas de Acessibilidade

Nunca dependa apenas da cor. Usuários com daltonismo podem não distinguir um link azul do texto preto. Mantenha o sublinhado ou associe a cor a outra indicação visual.
Sempre estilize :focus. Se você remover o contorno de foco padrão, substitua-o pelo seu próprio estilo visível — caso contrário, os usuários de teclado não conseguirão saber onde estão. Consulte a propriedade outline.
Mantenha contraste suficiente. O texto do link deve se destacar claramente em relação ao seu fundo e ao texto do corpo ao redor.

Resumo

Um link tem cinco estados, cada um com sua própria pseudo-class: :link, :visited, :hover, :active e :focus.
Ao estilizar vários estados, siga a ordem LVHA para que regras posteriores não substituam acidentalmente as anteriores.
text-decoration controla o sublinhado, color define a cor do texto e background-color adiciona um fundo.
Sempre estilize :focus e evite sinalizar links apenas com cor para mantê-los acessíveis.

Prática

Quais propriedades são usadas em CSS para modificar a aparência dos links?