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.