#123: If it Moves When You Click, Make Something Stick

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

The buttons on CSS-Tricks, at the time of this video, have a faux 3D effect. They look like a blue brick you are looking at from above at an angle. When you press down on them, their :active state is triggered (like all links/buttons/inputs) and the CSS moves them down and to the right, appearing as if you are literally pressing the brick down into the surface a bit.

What’s the problem? When you move an element like that (in this case, transform: translate(3px, 3px);) you are changing the area in which that press will trigger the “click” DOM event. If the location of that press happens to be in an area now outsize of that “clickable” area, it won’t trigger. So the button looks pressed, but never actually becomes pressed. That’s weird and bad and unexpected behavior.

The effect is still cool though, so in this video we fix it by moving a pseudo element to fill the space left behind, making the “clickable” area always the same.

Check out the demo Pen.