# Keycap Buttons

> Three vintage mechanical-keyboard keycaps in three finishes — with domed tops, tall front skirts, and a deep physical press: the cap sinks, the skirt compresses, and the contact shadow tightens, all via GPU-friendly transforms and static shadow swaps.

- Category: Button
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Runway
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: keyboard, 3d
- Page: https://builder.atheros.ai/components/keycap
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_keycap/preview-fa999f283954.webp

## 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

## Keyboard shortcuts

- `Enter / Space` — Press the focused keycap — plays the physical sink animation
- `Tab` — Move focus between the three keycaps

## Common questions

**Which frameworks is Keycap Buttons available in?**

Keycap Buttons ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Keycap Buttons free?**

Keycap Buttons is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Keycap Buttons support dark mode?**

Yes. Keycap Buttons ships light and dark themes, both drawn from the Runway design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Keycap Buttons live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/keycap

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt