Shimmer Button

Motion

High-conversion Tailwind shimmer button and Tailwind CSS animated button components featuring continuous glassy sweeps.

On this page

Implementation Usage Shimmer Buttons Props

Draw the user's eye exactly where you want it with a Tailwind shimmer button. Featuring a continuous, glossy sweeping animation, this Tailwind CSS animated button is designed specifically to maximize click-through rates on primary actions without looking aggressive or out of place in a premium aesthetic.

Use a shimmer button for your primary Call to Action, or place one prominently in your top Header navigation.

Implementation

"use client";

import React from "react";
import { cn } from "@/lib/utils";

interface ShimmerButtonProps {
  children: React.ReactNode;
  className?: string;
  shimmerColor?: string;
  borderRadius?: string;
  shimmerDuration?: string;
  background?: string;
  onClick?: () => void;
}

export const ShimmerButton: React.FC<ShimmerButtonProps> = ({
  children, className = "",
  shimmerColor = "rgba(255,255,255,0.12)",
  borderRadius = "10px", shimmerDuration = "2.5s",
  background = "#1d1d1f", onClick,
}) => {
  return (
    <button onClick={onClick} className={cn(
      "group relative inline-flex items-center justify-center overflow-hidden",
      "whitespace-nowrap px-5 py-2.5 text-[14px] font-medium text-white",
      "transition-transform duration-200 active:scale-[0.98]", className)}
      style={{ borderRadius }}>
      <div className="absolute inset-0 overflow-hidden" style={{ borderRadius }}>
        <div className="absolute inset-0" style={{ background }} />
        <div className="absolute inset-0 animate-shimmer-slide" style={{
          background: `linear-gradient(120deg, transparent 30%, ${shimmerColor} 45%,
            ${shimmerColor} 55%, transparent 70%)`,
          backgroundSize: "250% 100%", animationDuration: shimmerDuration,
        }} />
      </div>
      <span className="relative z-10">{children}</span>
    </button>
  );
};

Usage

Shimmer Buttons

<ShimmerButton>Get started</ShimmerButton>
<ShimmerButton background="#0071e3">Learn more</ShimmerButton>
<ShimmerButton
  background="linear-gradient(135deg, #1d1d1f, #434343)"
  borderRadius="100px">
  Try it free →
</ShimmerButton>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Button content
`shimmerColor`	`string`	`"rgba(255,255,255,0.12)"`	Shimmer color
`background`	`string`	`"#1d1d1f"`	Button background
`borderRadius`	`string`	`"10px"`	Border radius
`shimmerDuration`	`string`	`"2.5s"`	Animation duration
`className`	`string`	`""`	Additional CSS classes
`onClick`	`() => void`	—	Click handler

Card Spotlight

Gradient Text