Circle Expand Button

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

Customise it with AI

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