Τα κουμπιά στο CSS-Tricks, τη στιγμή αυτού του βίντεο, έχουν εφέ faux 3D. Μοιάζουν με ένα μπλε τούβλο που κοιτάτε από ψηλά υπό γωνία. Όταν πατάτε προς τα κάτω, ενεργοποιείται η ενεργή κατάσταση τους (όπως όλοι οι σύνδεσμοι / κουμπιά / είσοδοι) και το CSS τα μετακινεί προς τα κάτω και προς τα δεξιά, εμφανίζονται σαν να πιέζετε κυριολεκτικά το τούβλο προς τα κάτω στην επιφάνεια.
Ποιο είναι το πρόβλημα? Όταν μετακινείτε ένα στοιχείο σαν αυτό (σε αυτήν την περίπτωση, μετατρέψτε translate(3px, 3px);:) αλλάζετε την περιοχή στην οποία αυτός ο τύπος θα ενεργοποιήσει το συμβάν "κλικ" DOM. Εάν η τοποθεσία αυτού του τύπου τυχαίνει να βρίσκεται σε μια περιοχή που έχει πλέον μέγεθος από αυτήν την "δυνατότητα κλικ", δεν θα ενεργοποιηθεί. Έτσι, το κουμπί φαίνεται πατημένο, αλλά δεν γίνεται ποτέ πατημένο. Αυτή είναι παράξενη και κακή και απροσδόκητη συμπεριφορά.
Ωστόσο, το εφέ εξακολουθεί να είναι δροσερό, οπότε σε αυτό το βίντεο το διορθώνουμε μετακινώντας ένα ψευδο στοιχείο για να γεμίσει το κενό χώρο, καθιστώντας την περιοχή «κλικ» πάντα η ίδια.