# Expand Button

> Circle icon button that morphs into a gradient pill on hover — the icon flies up as the label scales in, via a GPU-composited clip-path reveal.

- Category: Button
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Vector
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: pill, gradient, animation
- Page: https://builder.atheros.ai/components/expand
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_expand/preview-89cf7eb92d69.webp

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

## Keyboard shortcuts

- `Enter / Space` — Activate the focused expand button
- `Tab` — Move focus to and from the expand button

## Common questions

**Which frameworks is Expand Button available in?**

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

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

**Does Expand Button support dark mode?**

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

## Get the code

Preview Expand 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/expand

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