# Circle Expand Button

> A gradient accent circle with a contrasting chevron arrow that expands into a full pill on hover, sweeping under the label — a faithful port of the original circle-expand button, animated with GPU-friendly `clip-path` + `transform: scaleX()` instead of a width transition.

- Category: Button
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Aperture
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: gradient, transform, animation
- Page: https://builder.atheros.ai/components/circle-expand
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_circle_expand/preview-42a0d5409f80.webp

## Features

- Perfect gradient circle at rest expands left-to-right into a full pill on hover — animated `clip-path: inset(… round …)` keeps the round cap at every frame, zero layout cost
- Inner paint layer stretches via `transform: scaleX()` so the violet-to-purple gradient spans the full range at rest and at full expansion, exactly like the original width animation
- Text label transitions from deep amethyst ink to white as the fill sweeps beneath it
- Single "Explore" button centered on the page — transparent, borderless, no added chrome
- White CSS chevron arrow stays anchored at the circle's left edge above the fill via z-index
- Amethyst identity in both themes: lavender page with violet-to-purple gradient in light, deep plum page with lilac gradient in dark
- `prefers-reduced-motion` support — all transitions collapse to 0.01ms
- Responsive layout adapts padding on narrow viewports

## Accessibility

- **Button label** — `<button>` has `aria-label="Explore"`
- **Decorative elements** — Fill, paint and arrow spans use `aria-hidden="true"`
- **Theme toggle role** — `role="switch"` with `aria-checked` toggled by JS
- **Theme toggle keyboard** — `keydown` listener handles `Enter` and `Space` activation
- **Focus indicators** — `:focus-visible` with `var(--bce-accent)` outline and 2px offset, matching the original
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all transitions

## Keyboard shortcuts

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

## Common questions

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

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

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

**Does Circle Expand Button support dark mode?**

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

## Get the code

Preview Circle 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/circle-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