Shimmer Button
ProButton with a CSS shimmer sweep animation on hover. No JS, pure CSS transform.
Buttons · primitive · basic · css · zero dependencies
shimmerColor="rgba(255,201,138,.35)" — 700ms, one pass
Button with a CSS shimmer sweep animation on hover. No JS, pure CSS transform.
- hero CTA button
- newsletter signup button
- checkout and buy-now button
- app download button
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Button label or content. |
shimmerColor | string | "rgba(255,255,255,0.15)" | Color of the shimmer sweep band. |
background | string | "rgba(30,30,35,1)" | Background color of the button. |
size | "sm" | "md" | "lg" | "md" | Controls padding and font size. |
className | string | — | Additional classes to override or extend the button styling. |
Does Shimmer Button work with Next.js App Router?
Yes. It's a "use client" React component and works as a client component in the App Router.
Are there any dependencies to install?
None. It's a pure CSS transform transition — no external packages required.
Is it responsive?
Yes. Size is controlled via the size prop and standard Tailwind padding, so it behaves as a normal inline button in any layout.
Does it respect prefers-reduced-motion?
Not automatically. The shimmer sweep is a hover-triggered CSS transition (700ms), not a continuous animation, but there's no reduced-motion media query — override the transition in your own CSS if strict compliance is required.