# 123: Če se premakne, ko kliknete, naredite nekaj lepljivega - CSS-triki

Anonim

Gumbi na CSS-trikih imajo v času tega videoposnetka ponarejen 3D učinek. Izgledajo kot modra opeka, ki jo gledate od zgoraj pod kotom. Ko pritisnete na njih, se sproži njihovo: aktivno stanje (tako kot vse povezave / gumbi / vhodi) in CSS jih premakne navzdol in v desno, videti je, kot da opeko dobesedno nekoliko pritisnete na površino.

V čem je problem? Ko premaknete tak element (v tem primeru transformirajte translate(3px, 3px);:), spremenite območje, v katerem bo pritisk sprožil dogodek "klik" DOM. Če je lokacija tiska na območju, ki je zdaj večje od tistega, ki ga je mogoče klikniti, se ne bo sprožilo. Tako je gumb videti pritisnjen, vendar dejansko nikoli ne pritisne. To je čudno in slabo ter nepričakovano vedenje.

Učinek je še vedno kul, zato ga v tem videoposnetku popravimo s premikanjem psevdo elementa, da zapolnimo zaostali prostor, tako da je območje, ki ga je mogoče klikniti, vedno enako.

Oglejte si predstavitev Pen.