Links HTML - Cores Diferentes
Um link HTML é exibido em uma cor diferente dependendo se foi visitado, não foi visitado ou está ativo.
Cores de links HTML
Por padrão, um link aparecerá assim (em todos os navegadores):
- Um link não visitado está sublinhado e azul
- Um link visitado é sublinhado e roxo
- Um link ativo está sublinhado e vermelho
Você pode alterar as cores do estado do link usando CSS:
Exemplo
Aqui, um link não visitado ficará verde sem sublinhado. Um link visitado será rosa sem sublinhado. Um link ativo será amarelo e sublinhado. Além disso, ao passar o mouse sobre um link (a:hover), ele ficará vermelho e sublinhado:
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
Botões de link
Um link também pode ser estilizado como um botão, usando CSS:
Este é um linkExemplo
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
Para saber mais sobre CSS, acesse nosso Tutorial de CSS .
Tags de link HTML
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
Para obter uma lista completa de todas as tags HTML disponíveis, visite nossa Referência de tags HTML .