I pulsanti su CSS-Tricks, al momento di questo video, hanno un finto effetto 3D. Sembrano un mattone blu che stai guardando dall'alto in un angolo. Quando si preme su di essi, il loro stato: attivo viene attivato (come tutti i collegamenti / pulsanti / input) e il CSS li sposta verso il basso e verso destra, apparendo come se si stesse letteralmente premendo un po 'il mattone sulla superficie.
Qual è il problema? Quando sposti un elemento del genere (in questo caso, trasforma translate(3px, 3px);:) stai cambiando l'area in cui quella pressione attiverà l'evento DOM "clic". Se la posizione di quella stampante si trova in un'area ora fuori misura rispetto a quella zona "cliccabile", non si attiverà. Quindi il pulsante sembra premuto, ma non viene mai effettivamente premuto. Questo è un comportamento strano, cattivo e inaspettato.
L'effetto è comunque interessante, quindi in questo video lo aggiustiamo spostando uno pseudo elemento per riempire lo spazio lasciato indietro, rendendo l'area "cliccabile" sempre la stessa.