Tlačítka na CSS-Tricks mají v době tohoto videa faux 3D efekt. Vypadají jako modrá cihla, na kterou se díváte shora pod úhlem. Když na ně zatlačíte, aktivuje se jejich: aktivní stav (stejně jako všechny odkazy / tlačítka / vstupy) a CSS je posune dolů a doprava a bude vypadat, jako byste doslova tlačili cihlu trochu do povrchu.
Co je za problém? Když přesunete takový prvek (v tomto případě transformace translate(3px, 3px);:), měníte oblast, ve které tento stisk spustí událost DOM „kliknutí“. Pokud je umístění tohoto lisu v oblasti, která je nyní nadměrně velká než tato „klikatelná“ oblast, nespustí se. Tlačítko tedy vypadá stisknuto, ale nikdy se nestane stisknuté. To je divné, špatné a nečekané chování.
Efekt je však stále skvělý, takže v tomto videu to opravíme přesunutím pseudoprvku, aby vyplnil zbývající prostor, takže oblast „klikatelnosti“ bude vždy stejná.