animations

ShimmerButton

A button with a CSS gradient sweep highlight on hover, drawing attention to primary CTAs.

v1.0.0react >=18next >=14tailwind >=4

buttonhovershimmerctahighlightgradient

Preview

Loading preview...

Props

Prop	Type	Default	Description
`children*`	`ReactNode`	`—`	Button label or content
`shimmerColor`	`string`	`rgba(255,255,255,0.1)`	Color of the shimmer highlight
`shimmerWidth`	`string`	`200%`	Width of the shimmer gradient band
`duration`	`number`	`1.5`	Duration of the shimmer sweep in seconds
`className`	`string`	`—`	Additional Tailwind classes
`id`	`string`	`—`	HTML id attribute

Slots

Slot	Type	Required	Description
`children`	`ReactNode`	Yes	Button label text or icon content

Layout

Display: inline-flex

Responsive: No

Renders as an inline-flex button element. Drop-in replacement for standard buttons.

Examples

Basic shimmer CTA

<ShimmerButton className="bg-white text-black">
  Get Started
</ShimmerButton>

Branded shimmer color

<ShimmerButton
  shimmerColor="rgba(238,80,44,0.2)"
  className="bg-neutral-900 text-white border border-neutral-700"
>
  Launch App
</ShimmerButton>

Slow shimmer

<ShimmerButton duration={3} className="bg-gradient-to-r from-purple-600 to-pink-600 text-white">
  Explore
</ShimmerButton>

Combined with MagneticHover

<MagneticHover>
  <ShimmerButton className="bg-white text-black">
    Sign Up Free
  </ShimmerButton>
</MagneticHover>

AI Usage Hint

Use ShimmerButton for primary CTAs that need visual emphasis. The sweep highlight draws attention on hover. Customize shimmerColor to match your brand. Works as a drop-in button replacement.

Works Well With

MagneticHoverFadeUp