# Shine Button

> A gradient button with a diagonal shine sweep animation that travels across the surface on hover, powered by GPU-composited `transform: translateX()` transitions — design-system agnostic.

- Category: Button
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Orchard
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: gradient, animation, transform
- Page: https://builder.atheros.ai/components/shine
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_shine/preview-588b0dedc003.webp

## Features

- Diagonal shine sweep travels from off-screen left to off-screen right on hover using GPU-composited `transform: translateX()` — no layout thrash
- Gradient background from primary color to a blue-shifted blend, creating a cobalt-to-blue sheen
- Hover state adds a soft box-shadow elevation using `color-mix()` from the primary token
- Dark/light palette with `body.dark` class — all colors switch via CSS custom properties
- Reduced-motion support collapses all transitions to 0.01ms
- Focus-visible shine sweep mirrors the hover state for keyboard users

## Accessibility

- **Button accessible name** — `aria-label` matches visible text "Learn More"
- **Theme toggle** — `role="switch"` with `aria-checked` toggled by `toggleTheme()`
- **Keyboard activation** — Theme toggle responds to Enter and Space via `keydown` listener
- **Focus indicators** — `:focus-visible` with `--ring` outline and `2px` offset on all interactive elements
- **Shine on focus** — `.bsh-btn:focus-visible::before` triggers the same shine sweep as hover
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all transitions and animations

## Keyboard shortcuts

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

## Common questions

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

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

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

**Does Shine Button support dark mode?**

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

## Get the code

Preview Shine 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/shine

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