Los botones de CSS-Tricks, en el momento de este video, tienen un efecto 3D falso. Parecen un ladrillo azul que se mira desde arriba en ángulo. Cuando presionas hacia abajo sobre ellos, su: estado activo se activa (como todos los enlaces / botones / entradas) y el CSS los mueve hacia abajo y hacia la derecha, pareciendo como si literalmente estuvieras presionando un poco el ladrillo en la superficie.
¿Cuál es el problema? Cuando mueves un elemento como ese (en este caso, transform :), translate(3px, 3px);estás cambiando el área en la que esa pulsación activará el evento DOM "click". Si la ubicación de esa prensa se encuentra en un área que ahora es más grande que esa área en la que se puede hacer clic, no se activará. Por lo tanto, el botón parece presionado, pero en realidad nunca se presiona. Ese es un comportamiento extraño, malo e inesperado.
Sin embargo, el efecto sigue siendo genial, por lo que en este video lo arreglamos moviendo un pseudo elemento para llenar el espacio dejado atrás, haciendo que el área en la que se puede hacer clic sea siempre la misma.