Estilize estados interativos
Use pseudo-classes e transições para feedback claro.
- Aplicar hover/focus-visible com transição sutil.
Pseudo-classes modelam estados de interação. Hover e focus-visible tornam comportamento mais compreensível e acessível.
1.cta {
2 background: #165b33;
3 color: white;
4 transition: background-color 160ms ease;
5}
6
7.cta:hover,
8.cta:focus-visible {
9 background: #124727;
10}The button darkens on hover and keyboard focus
Mantenha feedback rápido e foco visível para navegação por teclado.
Principais conclusões
Aplicar hover/focus-visible com transição sutil.
Prefira regras simples e reutilizáveis.
Padronize tokens e estados para facilitar evolução visual.
Quiz da aula
5 perguntas · aprovação com 4 acertos · até 50 XP
Ao passar, você conclui a aula e mantém sua sequência. As perguntas erradas voltarão em sessões de revisão.
Pratique: escreva código em CSS
Estilize a página de exemplo, veja as mudanças na prévia isolada e execute verificações nos estilos calculados.
Estilize estados do botão
Em .cta, use fundo #165b33, texto branco e transition de background. Em :hover/:focus-visible, mude fundo para #124727.
- Estilos base do CTA
Seu CSS é aplicado a uma página de exemplo em uma prévia isolada. Os testes verificam os estilos calculados.
Dúvidas sobre esta lição
Travou em algum ponto? Pergunte. Descobriu algo? Compartilhe. Explicar também é uma ótima forma de aprender.
Carregando publicações…