Keycap Buttons

Features

• Three period materials built entirely from layered CSS gradients: yellowed bone plastic with a dark mono legend, faded retro-terminal orange, and worn black ABS with a subtle sheen
• Chunky old-school cap geometry — a tall visible front skirt, tight corner radius, and a slightly domed top face with an uneven warm patina that reads as decades of use
• Physical press on :active and on keyboard activation: the whole key sinks, the top face travels down inside the shell so the front skirt visibly compresses, and the contact shadow flips to a pre-defined tighter shadow; releasing plays a springy settle-back
• Hover lift — the key scales up a touch, its contact shadow deepens to a pre-defined hover shadow, the cap sheen brightens, and the legend ink deepens
• Momentary press only — real <button type="button"> elements with no toggle state
• Per-material sheen strength via a color-mix percentage custom property, so the worn black cap keeps only a faint highlight
• Dark mode swaps the ground to a warm night floor, deepens the contact shadows, and lifts the charcoal cap rim so it never vanishes
• Reduced-motion support collapses all transitions to 0.01ms for an instant press

Accessibility

Button accessible names

Each keycap carries an aria-label naming its key, e.g. "enter key"

Grouping

The deck is a role="group" with an aria-label

Keyboard press feedback

js/app.js adds is-pressed on Space/Enter keydown and removes it on keyup/blur, so keyboard activation plays the same sink animation as a mouse press

Focus indicators

:focus-visible with --ring outline and 3px offset on each keycap

Reduced motion

prefers-reduced-motion: reduce collapses all transitions to 0.01ms — the press becomes instant

Customise it with AI

Open Keycap Buttons in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the button is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.