# Shiny Button

> A diagonal white streak sweeps across on hover; sweep duration is adjustable.

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

## Install

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

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

## Dependencies

No extra dependencies.

## Usage

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

import { ShinyButton } from "@/components/shiny-button"

export default function ShinyButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4 p-8">
      <ShinyButton>Upgrade now</ShinyButton>
      <ShinyButton duration={500}>
        <Zap className="size-4" /> Fast sweep
      </ShinyButton>
      <ShinyButton duration={2000} className="bg-emerald-700 text-white">
        Slow sweep
      </ShinyButton>
    </div>
  )
}
```

## Source

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

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

export interface ShinyButtonProps extends React.ComponentProps<"button"> {
  /** Duration of the sweep in milliseconds */
  duration?: number
}

export function ShinyButton({ duration = 1000, className, children, ...props }: ShinyButtonProps) {
  return (
    <button
      className={cn(
        "group relative inline-flex h-11 items-center justify-center overflow-hidden rounded-lg bg-primary px-7 text-sm font-medium text-primary-foreground",
        "shadow-[inset_0_1px_0_rgba(255,255,255,0.25)] transition-transform duration-200 active:scale-[0.97]",
        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none",
        "disabled:pointer-events-none disabled:opacity-50",
        className
      )}
      {...props}
    >
      <span className="relative z-10 inline-flex items-center gap-2">{children}</span>
      <span
        aria-hidden
        className="pointer-events-none absolute inset-y-0 left-0 w-12 -translate-x-[160%] -skew-x-[25deg] bg-gradient-to-r from-transparent via-white/60 to-transparent transition-transform ease-out group-hover:translate-x-[360%] motion-reduce:hidden"
        style={{ transitionDuration: `${duration}ms` }}
      />
    </button>
  )
}
```