Gradient Sweep Button

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

Customise it with AI

Open Gradient Sweep 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.