# Spark Button

> An outlined button with a gradient border that sweeps diagonally from corner to corner on hover using a single clip-path transition and glow box-shadow — pure CSS, no JavaScript required for the effect.

- Category: Button
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Roastery
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: gradient, clip-path, animation
- Page: https://builder.atheros.ai/components/spark
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_spark/preview-eec3021b950a.webp

## Features

- Gradient border sweeps in from corner to corner via GPU-composited clip-path transition (0.4s)
- Outlined surface button — transparent inner panel backed by a gradient `::before` layer
- Glow box-shadow on hover using a bright chartreuse-lime spark glow
- Smooth border-color fade on `::after` as the gradient reveals underneath
- Active state fills inner panel with a translucent primary glow
- Dark and light theme support via `body.dark` class
- Responsive layout adjusts padding on narrow viewports
- Fully accessible with `aria-label` on the button and keyboard activation

## Accessibility

- **Button accessible name** — `<button>` has `aria-label` describing its action
- **Theme toggle role** — `role="switch"` with `aria-checked` toggled by JS
- **Theme toggle keyboard** — Responds to `Enter` and `Space` keys
- **Focus ring** — `:focus-visible` with `--ring` outline on all interactive elements
- **Reduced motion** — `prefers-reduced-motion: reduce` collapses all animations to 0.01ms
- **Tap highlight** — `-webkit-tap-highlight-color: transparent` prevents double tap flash

## Keyboard shortcuts

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

## Common questions

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

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

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

**Does Spark Button support dark mode?**

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

## Get the code

Preview Spark 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/spark

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