# Shimmer Button

> Button with a sweeping shimmer; shine color, background and speed are configurable.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/shimmer-button
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/shimmer-button.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

No extra dependencies.

## Usage

```tsx title="components/shimmer-button-demo.tsx"
import { ArrowRight } from "lucide-react"

import { ShimmerButton } from "@/components/shimmer-button"

export default function ShimmerButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4">
      <ShimmerButton>
        Get started <ArrowRight className="size-4" />
      </ShimmerButton>
      <ShimmerButton background="linear-gradient(180deg, #fb923c 0%, #ea580c 100%)" duration={1.8}>
        Upgrade to Pro
      </ShimmerButton>
    </div>
  )
}
```

## Source

```tsx title="components/shimmer-button.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const keyframes = `@keyframes shimmer-button-sweep{0%{transform:translateX(0) skewX(-20deg)}60%,100%{transform:translateX(450%) skewX(-20deg)}}`

export interface ShimmerButtonProps extends React.ComponentProps<"button"> {
  /** Color of the sweeping shine */
  shimmerColor?: string
  /** Any CSS background value */
  background?: string
  /** Seconds per sweep */
  duration?: number
}

export function ShimmerButton({
  shimmerColor = "#ffffff",
  background = "linear-gradient(180deg, #27272a 0%, #09090b 100%)",
  duration = 2.4,
  className,
  style,
  children,
  ...props
}: ShimmerButtonProps) {
  return (
    <>
      <style href="shimmer-button" precedence="default">
        {keyframes}
      </style>
      <button
        className={cn(
          "group relative inline-flex h-11 items-center justify-center overflow-hidden rounded-full px-6 text-sm font-medium text-white",
          "shadow-[inset_0_-8px_12px_#ffffff1a,0_0_0_1px_#ffffff1f] transition-[transform,box-shadow] duration-200",
          "hover:shadow-[inset_0_-6px_12px_#ffffff33,0_0_0_1px_#ffffff33] active:scale-[0.98]",
          "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
          className
        )}
        style={{ background, ...style }}
        {...props}
      >
        <span aria-hidden className="pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]">
          <span
            className="absolute inset-y-0 -left-1/3 w-1/3 opacity-50"
            style={{
              background: `linear-gradient(90deg, transparent, ${shimmerColor}, transparent)`,
              animation: `shimmer-button-sweep ${duration}s ease-in-out infinite`,
            }}
          />
        </span>
        <span className="relative z-10 inline-flex items-center gap-2">{children}</span>
      </button>
    </>
  )
}
```