Les boutons sur CSS-Tricks, au moment de cette vidéo, ont un faux effet 3D. Ils ressemblent à une brique bleue que vous regardez d'en haut sous un angle. Lorsque vous appuyez dessus, leur état: actif est déclenché (comme tous les liens / boutons / entrées) et le CSS les déplace vers le bas et vers la droite, donnant l'impression que vous appuyez littéralement un peu sur la brique dans la surface.
Quel est le problème? Lorsque vous déplacez un élément comme celui-ci (dans ce cas, transformez:) translate(3px, 3px);vous changez la zone dans laquelle cette pression déclenchera l'événement DOM «clic». Si l'emplacement de cette presse se trouve dans une zone maintenant hors de la taille de cette zone «cliquable», elle ne se déclenchera pas. Ainsi, le bouton semble enfoncé, mais ne l'est jamais réellement. C'est un comportement étrange, mauvais et inattendu.
L'effet est toujours cool, donc dans cette vidéo, nous le corrigeons en déplaçant un pseudo élément pour remplir l'espace laissé derrière, rendant la zone «cliquable» toujours la même.