Die Schaltflächen auf CSS-Tricks zum Zeitpunkt dieses Videos haben einen künstlichen 3D-Effekt. Sie sehen aus wie ein blauer Ziegelstein, den Sie von oben in einem Winkel betrachten. Wenn Sie auf sie drücken, wird ihr aktiver Status ausgelöst (wie bei allen Links / Schaltflächen / Eingaben), und das CSS bewegt sie nach unten und rechts, so als würden Sie den Stein buchstäblich ein wenig in die Oberfläche drücken.
Was ist das Problem? Wenn Sie ein solches Element verschieben (in diesem Fall transformieren translate(3px, 3px);:), ändern Sie den Bereich, in dem dieses Drücken das DOM-Ereignis „Klick“ auslöst. Wenn sich der Standort dieser Presse zufällig in einem Bereich befindet, der jetzt übergroß von diesem "anklickbaren" Bereich ist, wird er nicht ausgelöst. Der Knopf sieht also gedrückt aus, wird aber nie wirklich gedrückt. Das ist seltsames und schlechtes und unerwartetes Verhalten.
Der Effekt ist jedoch immer noch cool. In diesem Video beheben wir ihn, indem wir ein Pseudoelement verschieben, um den verbleibenden Raum zu füllen, sodass der anklickbare Bereich immer der gleiche ist.