Shimmer Button

Pro

Button with a CSS shimmer sweep animation on hover. No JS, pure CSS transform.

Buttons · primitive · basic · css · zero dependencies

shimmer-button Buttons·preview
Light sweeps across on hover

shimmerColor="rgba(255,201,138,.35)" — 700ms, one pass

size
background
Shimmer Button

Button with a CSS shimmer sweep animation on hover. No JS, pure CSS transform.

Pro component

Join the waitlist to unlock all 14 components at launch.

Join the Pro waitlistor join free for 5 components at launch
Use it for
  • hero CTA button
  • newsletter signup button
  • checkout and buy-now button
  • app download button
Props
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.
FAQ
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.