Animações e botões com presença, sem atrapalhar o uso
Crie hovers mais expressivos com contraste, escala e movimento, preservando o foco, a leitura e a preferência de movimento reduzido.
Dê uma função ao movimento
Uma boa animação pode confirmar uma ação, mostrar uma relação ou dar personalidade ao site. O problema aparece quando todos os elementos competem ao mesmo tempo. Antes de animar, escreva o que aquele movimento comunica: este card é clicável, esta etapa terminou, este menu acabou de abrir. Se a única resposta for ‘preencher o espaço’, experimente tirar o efeito.
Você pode ter uma identidade visual intensa e ainda oferecer uma leitura tranquila. Concentre os movimentos maiores em momentos escolhidos, como a abertura de um menu, e use respostas curtas nos controles. O conteúdo principal deve permanecer disponível se a animação não rodar, se o JavaScript falhar ou se a pessoa preferir reduzir movimento.
Crie contraste entre o repouso e o hover
Um hover expressivo não precisa de cinco efeitos sobrepostos. Escolha uma mudança principal: inverter as cores, levantar o card ou deslocar a seta. Combine com um detalhe que reforce a ação, como uma sombra mais marcada. Mantenha o rótulo legível durante todo o movimento; um botão que desmonta seu próprio texto pode ficar interessante em um vídeo e cansativo no uso.
Teste o efeito perto das bordas e ao lado de outros elementos. A escala não deve cobrir um botão vizinho nem cortar uma informação importante. Para um card interativo, trate o conjunto como uma área coerente e deixe claro o destino. Se o card apenas apresenta informação, um hover decorativo não deve sugerir uma ação que não existe.
Pense também em teclado e toque
No celular, o hover não é um ponto de partida confiável para descobrir informações. Preços, descrições e ações importantes precisam aparecer sem depender de passar o mouse. Para quem usa teclado, mantenha um indicador de foco visível e ofereça um estado equivalente de destaque. Não remova o contorno apenas porque ele não combina com o estilo inicial do componente.
Use um link quando a ação leva a outro endereço e um botão quando ela executa uma ação na página. Preserve os nomes acessíveis dos controles, mesmo quando o desenho usa apenas um ícone. Um menu em tela cheia também precisa de um fechamento evidente e de um percurso de teclado que mantenha a pessoa orientada.
Prepare uma versão com menos movimento
A consulta de mídia prefers-reduced-motion permite detectar a preferência por movimento reduzido configurada no dispositivo. A documentação da MDN mostra que o valor reduce indica essa preferência. Use esse sinal para remover deslocamentos e escalas desnecessárias, mantendo as mudanças de estado compreensíveis por outros meios, como cor, borda ou texto.
Este exemplo mantém o contraste do botão e retira a translação quando a preferência está ativa. Em um componente real, aplique a mesma decisão aos ícones e pseudoelementos que também se movem. Não basta reduzir a duração se o resultado ainda produz um salto visual incômodo.
.action {
transition: background-color 180ms, transform 180ms;
}
.action:is(:hover, :focus-visible) {
background: #e9e3d3;
color: #10100e;
transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
.action { transition: none; }
.action:is(:hover, :focus-visible) { transform: none; }
}Teste a experiência inteira
Veja a página em um celular, navegue com Tab, abra e feche o menu e ative o movimento reduzido do sistema. Repare no que continua animando fora da tela e no que muda durante uma leitura longa. Efeitos contínuos merecem um controle de pausa quando fazem parte da experiência; instruções importantes não podem desaparecer junto com eles.
Avalie também se a animação está respondendo à ação ou apenas atrasando o resultado. Um botão pode ter personalidade e ainda responder imediatamente. O objetivo é criar uma interface que você reconhece pelo estilo e entende pelo comportamento, inclusive quando prefere vê-la parada.
