Shine Button

AI Pass+

button#gradient#animation#transform

design.md

Preview

AI Assistant

Grab the code for this component with a free account

Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.

Create free account Already have one? Sign in

Code

Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.

Create free account Sign in

Button component

About 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.

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

Customise it with AI

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

Explore Other Components

View all

Icon Swap Button

VanillaReact

A gradient pill button where the text label slides up and a download icon slides in from below on hover — driven entirely by GPU-composited `translateY` transitions with no layout recalculation.

#button#gradient#pill

Pass+

Warp Button

VanillaReact

A bordered button that jumps to warp speed on hover — a rotating gradient ring, two parallax layers of light-streaks scrolling past, a one-shot jump-flash, and a "Launch" → "Ready" warp text-swap. All driven by CSS hover and focus states, fully design-system agnostic.

#button#gradient#glow

Pass+

Expand Button

VanillaReact

Circle icon button that morphs into a gradient pill on hover — the icon flies up as the label scales in, via a GPU-composited clip-path reveal.

#button#pill#gradient

Pass+

Spark Button

VanillaReact

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.

#button#gradient#clip-path

Pass+

Badge Arrow Button

VanillaReact

A pill button with a primary-color gradient circle badge that inverts on hover with a diagonal arrow slide animation — pure CSS transitions, no keyframes required.

#button#badge#gradient

Pass+

Circle Expand Button

VanillaReact

A gradient accent circle with a contrasting chevron arrow that expands into a full pill on hover, sweeping under the label — a faithful port of the original circle-expand button, animated with GPU-friendly `clip-path` + `transform: scaleX()` instead of a width transition.

#button#gradient#transform

Ready to build?

300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.

Get Atheros AI Pass Try for Free

Starting at $9.9 per month, billed annually