3D Press

Create a 3D press button. A button that looks physically raised and gets pushed down when pressed, like a mechanical key. Implementation: the depth is a solid box-shadow with no blur: box-shadow: 0 6px 0 <darker shade of the button color> (e.g. accent orange on top, deep rust below). On press (pointerdown / Space key down): transform: translateY(6px) and box-shadow: 0 0 0: the button travels exactly the shadow's height, so its bottom edge stays fixed and the press reads as truly physical. Release reverses it. Transition both properties 90ms ease-out: presses must feel instant. Details: reserve the depth in layout (padding-bottom on a wrapper equal to the shadow height) so the page doesn't shift; the darker shade should be the same hue, roughly 35% darker, never gray or black; wire both pointer events and keyboard (Space/Enter) so keyboard users feel it too, and clear the pressed state on pointer leave. Under prefers-reduced-motion, skip the travel and just darken the button slightly while pressed. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.