Tlačidlá na CSS-Tricks majú v čase tohto videa faux 3D efekt. Vyzerajú ako modrá tehla, na ktorú sa pozeráte zhora pod uhlom. Keď na ne zatlačíte, aktivuje sa ich: aktívny stav (ako všetky odkazy / tlačidlá / vstupy) a CSS ich presunie nadol a doprava, takže vyzerá, akoby ste tehlu doslova trochu vtlačili dolu na povrch.
Aký je problém? Keď presuniete taký prvok (v tomto prípade transformácia translate(3px, 3px);:), meníte oblasť, v ktorej toto stlačenie spustí udalosť DOM „kliknutia“. Ak sa umiestnenie tohto lisu nachádza v oblasti, ktorá je teraz mimo tejto „klikateľnej“ oblasti, nespustí sa. Tlačidlo teda vyzerá stlačené, ale nikdy sa nestlačí. To je zvláštne a zlé a neočakávané správanie.
Efekt je však stále skvelý, takže v tomto videu to napravíme presunutím pseudoprvku, aby vyplnil miesto, ktoré zostalo po sebe, takže oblasť, na ktorú je možné kliknúť, bude vždy rovnaká.