Ink Press Button

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

Customise it with AI

Open Ink Press Button 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.