8-bit game-style button with a chunky pixel border (outline + box-shadow), scanline overlay via repeating-linear-gradient, monospace font, and a stepped jitter shake animation on press. The outer wrapper uses a black frame to simulate a cartridge slot border. No dependencies.
Goal: Create a "Retro Pixel" button animation.
Visual behavior: An 8-bit game-style button. It sits inside a black border frame (outer wrapper div). The button itself has a chunky pixel aesthetic: no border-radius, monospace font, uppercase text, thick border, a bottom/right box-shadow for pixel-art depth, and a scanline overlay (repeating-linear-gradient of semi-transparent stripes every 4px). On press (mousedown), it depresses 3px (translateY) and the box-shadow shrinks. On press it also fires a steps()-based jitter shake animation via a data attribute. On mouseup/leave, it resets.
Technique: inject a CSS @keyframes btn-pixel-shake animation that snaps between ±3px x-offsets in steps(1) timing. On mousedown: call removeAttribute/offsetWidth/setAttribute to re-trigger the animation, and set a pressed state for the box-shadow change. Use a useRef for the button. The scanline overlay is an absolutely-positioned span with repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.1) 3px, rgba(0,0,0,0.1) 4px).
Accessibility: Shake animation disabled under prefers-reduced-motion; still depresses on press.
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.