Gradient Button

An accent button that keeps its color in Light and Dark. Hover sweeps a sheen.

FreeWeb and MobileMotion

npx shadcn add @fetaui/gradient-button

Playground

Colors

Icon

Disabled

Color

Icons animation

Motion

Installation

Terminal· bash

1 npx shadcn add @fetaui/gradient-button

Emerald, Violet and Orange keep their color in Light and Dark.

Motion

Hover sweeps a sheen once, a soft light follows the cursor and a ring of the button's own colors turns around the edge every 2.4 s.
The button drifts up to 3 px toward the pointer and settles in 420 ms when it leaves. The icon tilts and pops on a spring.
A press deepens the gradient, sinks the button to 0.97 and sends a ripple and six sparks out from the press point in 600 ms.
With reduced motion, or animated off, only the color changes stay: no light, ring, pull, sheen or burst.

The sheen is a one shot CSS transition on a pseudo element. No JavaScript runs on hover.
The press is a transform on a spring, so it never runs layout.

Give your coding assistant the Markdown reference instead of screenshots.

Import from @/components/fetaui/gradient-button.
color is emerald, violet or orange. Children are the label and icon goes before it.
An icon with no text needs aria-label.
There is no loading state. Use Button or Particle Button for async work.