Neste artigo, você aprenderá como usar CSS para definir diferentes estados de um link. Aprenderá a personalizar seus links de maneira simples e eficaz. Vem comigo!
Estilizando links com CSS
Links ou hiperlinks são uma parte importante de um site. Ele permite que os visitantes naveguem no site. Portanto, estilizar corretamente seus links é um aspecto importante da construção de um site amigável.
Os links têm quatro estados diferentes – Link, Visited, Active e Hover. Esses quatro estados de um link podem ser estilizados de maneira diferente usando os seguintes seletores de pseudoclasse âncora.
- a:link – Define o estilo para links normais ou não visitados.
- a:visited — Define o estilo dos links que o usuário já visitou.
- a:hover — Estiliza o link quando o usuário passa o ponteiro do mouse sobre o link.
- a:active — Define o estilo do link quando clicado.
Você pode especificar as propriedades CSS que desejar, como cores, fontes, planos de fundo, bordas e muito mais. Personalize o estilo do link para cada seletor, assim como faria com o texto normal.
a:link { /* unvisited link */
color: #ff0000;
text-decoration: none;
border-bottom: 1px solid;
}
a:visited { /* visited link */
color: #ff00ff;
}
a:hover { /* mouse over link */
color: #00ff00;
border-bottom: none;
}
a:active { /* active link */
color: #00ffff;
}A ordem na qual você estiliza os diferentes estados de link é importante, porque a última configuração tem precedência sobre as regras de estilo definidas anteriormente.
Nota: Em geral, a ordem das pseudo-classes deve ser a seguinte – :link, :visited, :hover, :active, :focus para funcionar corretamente.
Modificar o estilo de link padrão
Em todos os principais navegadores da Web (como Chrome, Firefox, Safari, etc.), os links nas páginas da Web são sublinhados e, se você não os estilizar de maneira exclusiva, a cor do link padrão do navegador é usada.
Por padrão, os links de texto aparecem da seguinte forma na maioria dos navegadores:
- Os links não visitados são sublinhados em texto azul.
- Os links visitados são texto sublinhado em roxo.
- Link ativo como texto sublinhado em vermelho.
No entanto, não há alteração na aparência do link no estado de foco. Ele fica azul, roxo ou vermelho dependendo do estado em que você está (ou seja, não visitado, visitado ou ativo).
Agora vamos ver como personalizar o link substituindo o estilo padrão.
Definir cores personalizadas para links
Basta usar a propriedade CSS color para definir a cor de sua escolha para os diferentes estados do link. Mas ao escolher as cores, certifique-se de que os usuários possam distinguir claramente entre texto normal e links.
Vamos tentar o seguinte exemplo para entender como funciona basicamente:
a:link {
color: #1ebba3;
}
a:visited {
color: #ff00f4;
}
a:hover {
color: #a766ff;
}
a:active {
color: #ff9800;
}Leia também: CSS: guia sobre formatação texto
Remova o sublinhado padrão dos links
Se você não gosta do sublinhado padrão nos links, basta usar a propriedade CSS text-decoration para se livrar dele. Alternativamente, você pode aplicar outros estilos a links como cor de fundo, borda inferior, negrito, etc. Faça-o se destacar do texto normal.
Os exemplos a seguir mostram como remover ou definir sublinhados para diferentes estados de um link.
a:link, a:visited {
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}Faça links de texto parecerem botões
Você também pode usar CSS para fazer links de texto regulares parecerem botões. Para isso, precisamos usar mais propriedades CSS como background-color, border, display, padding, etc. Você aprenderá mais sobre essas propriedades em artigos posteriores.
Vamos dar uma olhada no exemplo a seguir para ver como funciona:
a:link, a:visited {
color: white;
background-color: #1ebba3;
display: inline-block;
padding: 10px 20px;
border: 2px solid #099983;
text-decoration: none;
text-align: center;
font: 14px Arial, sans-serif;
}
a:hover, a:active {
background-color: #9c6ae1;
border-color: #7443b6;
}O resultado é este:
