A chunky RPG-style button with a thick box-shadow that simulates physical depth. On mousedown it snaps down 5px while the shadow collapses, then springs back on release — replicating the feel of pressing a physical arcade or game controller button. No dependencies.
Goal: Create a "Press 3D" button animation.
Visual behavior: A chunky game-style button with thick physical depth. At rest, a 6px dark box-shadow extends below the button, making it look raised. On mousedown, the button instantly translates down 5px and the box-shadow collapses to 1px — simulating the button being pushed into the surface. On mouseup or mouseleave, it snaps back. The transition is 60ms so it feels snappy and physical, not floaty.
Technique: Use React useState (pressed: boolean). onMouseDown sets pressed=true, onMouseUp and onMouseLeave set pressed=false. The button style uses transform: translateY(pressed ? '5px' : '0') and box-shadow that switches between the raised and pressed states. No keyframes needed — pure inline style with 60ms transition.
Styling: Button has a gradient background (lighter at top, darker at bottom — like a lit surface), thick bottom box-shadow in a dark shade of the main color, inset highlight at top for the lit surface look. Uppercase bold text. Pill or slightly rounded shape (border-radius 8-12px).
Accessibility: Motion is instant input-response (60ms), not decorative animation. Acceptable under prefers-reduced-motion. Button still works without the visual press effect.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.