Expand Button

Features

• Circle-to-pill morph: fixed-width button clipped to a centered circle via clip-path: inset(); hover expands the clip symmetrically from the center to the full pill — GPU-composited equivalent of the original width animation, no layout shifts
• Icon flies upward and fades out on hover via transform: translateY(-200%) and opacity
• Label scales in at the center via transform: scale(0) → scale(1) plus opacity, reproducing the original font-size pop
• Hover gradient uses the button-expand (Magenta Bloom) design system, primary #C0268A — magenta→pink in light mode, brighter pink in dark mode (--bex-grad-start / --bex-grad-end)
• Idle 1px border ring drawn by a dedicated ::after circle so the clipped shape keeps a full outline; it fades out as the pill expands
• Ambient background glows tinted by the gradient endpoints, matching the original page in both themes
• Active press feedback via transform: scale(0.95)
• Keyboard-accessible — :focus-visible triggers the same expand animation as hover
• Reduced-motion support via prefers-reduced-motion: reduce

Accessibility

Button label

aria-label="Retrain" on the <button>, visible label marked aria-hidden to avoid duplication

Icon hiding

aria-hidden="true" on all decorative SVGs

Keyboard activation

Native <button> semantics — responds to Enter and Space

Focus retention

Click-to-blur is gated on :focus-visible, so keyboard activation keeps focus and the focus indicator on the button

Focus indicators

:focus-visible triggers the full expand animation and gradient fill as the focus indicator

Reduced motion

prefers-reduced-motion: reduce collapses all animations to 0.01ms

Customise it with AI

Open Expand 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.