Hover, focus e active
Um botão que não reage de nenhum jeito ao mouse passando por cima parece quebrado, mesmo funcionando perfeitamente por baixo.
Estudar esta lição interativa →Até aqui, todo CSS que você escreveu descreveu um estado fixo de um elemento. Mas elementos interativos, como botões e links, passam por diferentes estados conforme alguém interage com eles, e o CSS tem pseudoclasses específicas para estilizar cada um.
:hover
Enquanto o ponteiro do mouse está sobre o elemento. O feedback mais comum de "isto é clicável".
:focus
Quando o elemento está selecionado via teclado (Tab) ou clique. Essencial para quem navega sem mouse.
:active
No exato instante do clique (botão do mouse pressionado, antes de soltar). Some assim que solta.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Passe o mouse (hover), clique (active), e dê Tab até o botão (focus): três estados, três estilos diferentes.
Um exemplo de produto real: todo botão de "Comprar" ou "Enviar" bem projetado escurece ligeiramente no :hover (confirma "isto é clicável" antes mesmo do clique), fica com um contorno visível no :focus (essencial para quem navega só pelo teclado, retomando o tema de acessibilidade do curso de HTML), e reage visualmente no exato instante do :active.
É comum ver outline: none; usado só para "limpar" a borda azul padrão de foco do navegador, sem colocar nada no lugar. Isso é um problema sério de acessibilidade: sem nenhum indicador visual de foco, quem navega só pelo teclado perde completamente a noção de onde está na página. Se remover o padrão, substitua por um estilo de :focus próprio, nunca apague sem repor.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione .botao:hover.