3D Press Button
X-ray · layers
Parameters
How this effect works
The button is two rectangles pretending to be one object. The face is the button you see; underneath sits an identical, darker copy shifted down by a few pixels — that sliver of dark is the "side" of the button, and it's the entire 3D illusion. Press, and the face slides down over the edge: the sliver shrinks, so your eye reads it as the button sinking into the page. Turn the depth layer off and the same motion suddenly looks like a flat sticker twitching.
The spring layer lives in one CSS timing function: on release, the face doesn't just return — it overshoots its resting point and settles, like something with real mass. That overshoot is a single number in a cubic-bezier curve; drag the bounce slider and you're editing that number. The shadow underneath dims and shrinks while pressed, because an object closer to the ground casts a tighter shadow — a detail nobody notices consciously and everybody feels.