# Ink Press Button

> A press button with a sharp-cornered accent fill, a 2px border, and a hard offset shadow that collapses as the button physically presses down into the page on click — powered by GPU-composited `transform: translate()` transitions.

- Category: Button
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Sunset Coast
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: transform
- Page: https://builder.atheros.ai/components/ink-press
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_ink_press/preview-6194cfd9e5cc.webp

## Features

- Hard offset shadow (`0.25rem 0.25rem 0`) replaces soft elevation — the button reads as a physical block resting on the page
- Press-down effect on `:active`: the button translates by the exact shadow offset while the shadow collapses to zero, so it appears to sink into the page
- Sharp corners via a zero radius override — no rounding anywhere, faithful to the ice-and-ink identity
- Ultramarine fill darkens on hover via a dedicated active accent token
- Dark/light palette with `body.dark` class — ink flips to cool off-white, the fill lifts to periwinkle, all via CSS custom properties
- Reduced-motion support collapses all transitions to 0.01ms
- Inline plus icon inherits `currentColor` so it always matches the label

## Accessibility

- **Button accessible name** — `aria-label` matches visible text "Add appointment"
- **Decorative icon** — Plus SVG carries `aria-hidden="true"` so the accessible name stays clean
- **Theme toggle** — `role="switch"` with `aria-checked` toggled by `toggleTheme()`
- **Keyboard activation** — Theme toggle responds to Enter and Space via `keydown` listener
- **Focus indicators** — `:focus-visible` with `--ring` outline and `2px` offset on all interactive elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all transitions and animations

## Keyboard shortcuts

- `Enter / Space` — Activate focused button or toggle theme
- `Tab` — Move focus between interactive elements

## Common questions

**Which frameworks is Ink Press Button available in?**

Ink Press Button 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 Ink Press Button free?**

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

**Does Ink Press Button support dark mode?**

Yes. Ink Press Button ships light and dark themes, both drawn from the Sunset Coast design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Ink Press Button 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/ink-press

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