Os botões em CSS-Tricks, no momento deste vídeo, tinham um efeito 3D falso. Eles se parecem com um tijolo azul que você está olhando de cima em ângulo. Quando você os pressiona, o estado ativo deles é acionado (como todos os links / botões / entradas) e o CSS os move para baixo e para a direita, parecendo como se você estivesse literalmente pressionando um pouco o tijolo na superfície.
Qual é o problema? Quando você move um elemento como esse (neste caso, transformar :), translate(3px, 3px);você está mudando a área na qual aquele pressionamento irá acionar o evento DOM “click”. Se a localização dessa impressora estiver em uma área agora fora do tamanho daquela área “clicável”, ela não será acionada. Portanto, o botão parece pressionado, mas nunca é realmente pressionado. Isso é um comportamento estranho, ruim e inesperado.
O efeito ainda é legal, então neste vídeo nós o corrigimos movendo um pseudoelemento para preencher o espaço deixado para trás, tornando a área “clicável” sempre a mesma.