Hyperlinks são um elemento central na web. Todo site os utiliza para conectar conteúdos diferentes e facilitar a navegação. No entanto, o design padrão dos links muitas vezes é pouco atraente. Os hyperlinks podem ser facilmente aprimorados e tornados mais amigáveis com CSS. Neste guia, eu vou te mostrar como estilizar os diferentes estados dos links de maneira atraente com CSS.
Principais descobertas
- Existem três estados principais dos links: normal, hover e visited.
- CSS permite personalizar a aparência desses estados.
- O uso das pseudoclasses:hover,:visited e:active é essencial para um design atraente.
Guia passo a passo
Fundamentos dos estados dos links
Primeiramente, é importante entender os três estados principais dos hyperlinks:
- Normal (não visitado)
- Hover (quando o mouse está sobre o link)
- Visited (links já visitados)
Para ilustrar, visite um site qualquer, como w3.org, e observe o comportamento dos links. No estado padrão, eles aparecem em azul. Após clicar, a cor provavelmente muda para roxo ou lilás, indicando que você já visitou o link.
Seletores CSS para links
Para estilizar os estados dos links em CSS, você usa os seletores a, a:hover e a:visited.
- O seletor a refere-se ao estado normal.
- O seletor a:hover cuida da aparência quando o usuário passa o mouse sobre o link.
- O seletor a:visited é usado para links que já foram visitados.
Adicionar efeitos de hover
Para melhorar a experiência do usuário, você deve adicionar o efeito de hover. Aqui, você pode, por exemplo, brincar com o padding e mudar a cor de fundo quando um link é sobreposto. Isso oferece ao usuário um feedback visual sobre onde o ponteiro do mouse está.
Ajustar decoração de texto
Outra maneira de melhorar o design do link é ajustando a text-decoration. Em vez de mostrar o link sempre sublinhado, você pode ativar esse sublinhado apenas quando o usuário passa o mouse sobre o link. Isso proporciona um visual moderno e organizado.
a:hover { text-decoration: underline; }
Adicionar estado ativo
O estado em que um link está sendo clicado é definido pelo seletor a:active. Este estado indica que o usuário está ativamente selecionando o link.
Unificação de todos os estados
Agora você abordou todos os estados necessários para a estilização de links.
a:visited { color: green; }
a:hover { background-color: #aaa; padding: 5px 15px; text-decoration: underline; }
a:active { background-color: lightgrey; }
Resumo – Embelezando hyperlinks com CSS
Neste guia, você aprendeu como estilizar efetivamente os diferentes estados dos hyperlinks com CSS. Agora você sabe que é importante usar os estados:hover,:visited e:active corretamente para criar uma interface web atraente e amigável. Com ajustes simples, como mudanças de cor e padding, você pode tornar os links mais atraentes e intuitivos.
Perguntas frequentes
Quais são os principais estados dos links em CSS?Os principais estados são normal, hover e visited.
Como posso ajustar o estado hover para links?Use o seletor a:hover em CSS para mudar a aparência ao passar o mouse.
Como estilizo links visitados em CSS?Use o seletor a:visited para adaptar o design de links já visitados.
Qual é a diferença entre a:active e a:hover?a:hover se refere a links que estão sob o ponteiro do mouse, enquanto a:active representa o estado enquanto o link é clicado.
Como posso ajustar o sublinhado dos links?Com text-decoration: none você pode remover o sublinhado e sob a selecção a:hover adicionar o sublinhado novamente.
