Uma UI física dá estados legíveis a um comando: disponível, armado, pressionado e concluído. Ao construir o LookADev, usei profundidade e feedback de pressão para ajudar o visitante a distinguir uma ação disponível de outra acabada de ser acionada.
Um botão no estilo CRT pode combinar uma borda elevada com uma transformação ao pressionar. Preserve a leitura do rótulo, do foco e do estado desabilitado. A profundidade é um dos sinais da interface; quem usa teclado ou reduz movimento também precisa de feedback claro.
Propriedades personalizadas de CSS permitem separar a borda iluminada, a sombra e o deslocamento da pressão. Como ponto de partida, experimente 80 ms ao pressionar e 120 ms ao soltar, depois teste com seus usuários. Essas durações são escolhas de design, não um limite universal de responsividade percebida.
Os botões de contato em formato de seletor de rádio na página de contato levaram isso adiante. Cada seletor gira acompanhando o ponteiro, se encaixa em posições fixas em ângulos específicos e aciona o canal correspondente (WhatsApp, Email, GitHub, LinkedIn). A rotação usa Math.atan2 nas coordenadas do ponteiro relativas ao centro do seletor, quantizadas em passos de 45 graus.
Meça os efeitos de hover antes de adotar will-change. Uma página com vários botões não cria necessariamente uma camada de composição por botão, e will-change pode consumir mais recursos. Compare os rastros de pintura e composição da mesma interação em vez de tratar a propriedade como uma correção de desempenho.
Confira a legibilidade dos estados durante a interação completa: o visitante encontra a ação, percebe que o clique foi registrado e entende o resultado? Mostre o progresso do trabalho assíncrono e mantenha uma forma clara de tentar de novo quando houver falha.
Referência: MDN: will-change e seus custos de recursos.