ShinyButton is a glossy, candy-like button: a bright indigo rim, lit from below, wraps a flatter, deeper inner face, so the face reads as sunk into the rim. Every click sends a bright glint sweeping across the rim and face while the surface briefly flares, and the button sinks slightly with a tighter shadow for a tactile press.
Preview
Props
Install
Add the item with the shadcn CLI.
npx shadcn@latest add @evilbuttons/shiny-buttonUsage
import ShinyButton from "@/components/evil-buttons/shiny-button";
export function ButtonDemo() {
return <ShinyButton onClick={() => console.log("Shiny")}>Launch</ShinyButton>;
}Variants
Slow glint
A longer shineDuration gives a lazier, more luxurious sweep.
Props
The component spreads native button props and forwards its ref to the button.
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The button label or content. |
shineDuration | number | 650 | Milliseconds the glint takes to sweep across on click. |
className | string | - | Extra classes passed to the button. |
Notes
- The glint runs on the Web Animations API, so it needs no animation library and restarts cleanly on rapid clicks.
prefers-reduced-motionskips the glint and flare; the press feedback stays.
Registry
The registry item includes components/evil-buttons/shiny-button.tsx and installs clsx and tailwind-merge as dependencies. The component imports cn from @/lib/utils, matching the project alias in components.json.