# Gradient Sweep Button

> A pill-shaped button whose fill wipes in from the left edge: an overlay layer scales from scaleX(0) to scaleX(1) on hover and on keyboard focus, while the trailing icon chip inverts to the accent colour.

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

## Features

- A full-bleed `::before` overlay filled with `--bgs-hover` scales from `scaleX(0)` to `scaleX(1)` with `transform-origin: left center`, wiping the surface colour in from the left edge (GPU-composited transform, no repaint)
- Full keyboard parity — `:focus-visible` reproduces the identical wipe and icon inversion as `:hover`, so the button never has a keyboard-only dead state
- The trailing icon chip inverts on hover/focus: `--bgs-ink` fill becomes `--bgs-accent`, glyph becomes `--color-on-primary`
- Active state deepens the wipe toward the accent (`color-mix` of `--bgs-hover` and `--bgs-accent`) and draws an inset hairline ring for tactile feedback
- Two concentric rings behind the stage (`.bg-layer::before` / `.bg-layer::after`) drawn from `--bgs-line`, framing the button
- Respects `prefers-reduced-motion: reduce` — all transitions and animations collapse to 0.01ms

## Accessibility

- **Button label** — `<button>` carries an `aria-label` matching its visible text
- **Decorative icon** — `.bgs-btn__icon` is marked `aria-hidden="true"` — the arrow adds no label text
- **Focus indicators** — `:focus-visible` draws a 2px `--ring` outline at 2px offset
- **Focus parity** — `:focus-visible` triggers the same wipe and icon inversion as `:hover`, so keyboard users see the same affordance
- **Keyboard focus retention** — The click handler blurs only on pointer activation (`event.detail > 0`); `Enter`/`Space` keep focus on the button
- **Reduced motion** — `prefers-reduced-motion: reduce` collapses all transitions to 0.01ms

## Keyboard shortcuts

- `Enter / Space` — Activate the focused button (focus is retained)
- `Tab` — Move focus to and from the button

## Common questions

**Which frameworks is Gradient Sweep Button available in?**

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

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

**Does Gradient Sweep Button support dark mode?**

Yes. Gradient Sweep 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 Gradient Sweep 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/gradient-sweep

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