Link do CSS

Com CSS, você pode definir estilos de link de várias maneiras.

link de texto link de texto botão de link botão de link

Definir estilo de link

Os links podem usar qualquer propriedade CSS (por exemplo color,font-family,background etc) para definir estilos.

instância

a {
  color: hotpink;
}

Experimente você mesmo

Além disso, você pode definir diferentes estilos de link com base no estado do link.

Os quatro estados de link são:

  • a:link - Link normal, não visitado
  • a:visited - Link visitado pelo usuário
  • a:hover - Quando o usuário passa o mouse sobre o link
  • a:active - Quando o link é clicado

instância

/* link não visitado */
a:link {
  color: red;
}
/* link visitado */
a:visited {
  color: green;
}
/* passar o mouse sobre o link */
a:hover {
  color: hotpink;
}
/* link selecionado */
a:active {
  color: blue;
}

Experimente você mesmo

Se estiver definindo estilos para vários estados de link, siga as regras de ordem a seguir:

  • a:hover deve vir após a:link e a:visited
  • a:active deve vir após a:hover

decoração de texto

text-decoration A propriedade é usada principalmente para remover sublinhado dos links:

instância

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

Experimente você mesmo

cor de fundo

background-color As propriedades podem ser usadas para especificar a cor de fundo do link:

instância

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

Experimente você mesmo

botão de link

Este exemplo demonstra um exemplo mais avançado, onde combinamos várias propriedades CSS para exibir links como caixas/botões:

instância

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}

Experimente você mesmo

Mais exemplos

Adicionar diferentes estilos a hiperlinks
Este exemplo demonstra como adicionar estilos adicionais a hiperlinks.
Avançado - Criar botão de link com borda
Este é outro exemplo de como criar caixas de link/botão.
Mudar cursor
A propriedade cursor especifica o tipo de cursor a ser exibido. Este exemplo demonstra diferentes tipos de cursor (útil para links).