Shimmer Button
A shimmer button with light flowing around its edge, an inner highlight lining, and dimensional hover feedback.
A bright arc rotates continuously around the button's center, revealed only along the border ring, forming light that flows around the perimeter. Pure CSS conic gradient plus motion/react rotation — no canvas and no external assets.
npx shadcn@latest add https://webberui.com/r/shimmer-button.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<ShimmerButton />
Installation
npx shadcn@latest add https://webberui.com/r/shimmer-button.jsonOr, once registries are configured in components.json, install it as @webberui/shimmer-button.
Usage
import { ShimmerButton } from "@/components/ui/shimmer-button";
<ShimmerButton onClick={() => console.log("clicked")}>
Get Started
</ShimmerButton>The component forwards all native button attributes (onClick, disabled, type, and so on), and className can override the size and background color.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
shimmerColor | string | "#ffffff" | Color of the light flowing around the edge |
shimmerSize | string | "1.5px" | Thickness of the light band (that is, the border width) |
shimmerDuration | number | 3 | Time for the light to travel around once (seconds) |
spread | number | 40 | Angular width of the bright arc (degrees); larger means a longer light band |
borderRadius | string | "9999px" | Button corner radius |
background | string | "rgba(0, 0, 0, 1)" | Button background color, either a solid color or a gradient |
className | string | — | Forwarded to the root button; can override spacing and size |
All other React.ButtonHTMLAttributes are forwarded to the underlying button.
Accessibility
- When the user has "reduce motion" enabled at the system level, the light stops rotating and the button keeps a static appearance
- Every decorative layer carries
aria-hidden, so assistive technology only reads the button text - It has a
focus-visiblefocus ring, keeping keyboard operation visible
Stateful Button
A state-machine button running idle → loading → success / error, switching automatically from an async onClick, with the content crossfading and the width morphing along with it.
Ripple Button
A button with a spreading click ripple, radiating a Material-style wave out from the click point.