# Shimmer Button

> A dark button with a sweeping sky-blue shimmer and a glowing bottom edge. Zero dependencies, keyframes included.

- Category: Buttons
- Type: component
- License: MIT (free)
- Page: https://niceui.dev/components/shimmer-button

## Installation

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

Or copy the source below into `components/ui/shimmer-button.tsx`.

## Source

```tsx
import * as React from "react";

export interface ShimmerButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}

export function ShimmerButton({ children, className = "", ...props }: ShimmerButtonProps) {
  return (
    <button
      className={[
        "group relative inline-flex h-11 items-center gap-2 overflow-hidden rounded-full",
        "border border-sky-300/30 bg-black px-6 text-sm font-medium text-sky-100",
        "transition-colors duration-300 hover:border-sky-300/60",
        className,
      ].join(" ")}
      {...props}
    >
      <style>{"@keyframes nice-shimmer{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}"}</style>
      <span
        aria-hidden
        className="absolute inset-0 bg-gradient-to-r from-transparent via-sky-300/25 to-transparent"
        style={{ animation: "nice-shimmer 2.6s ease-in-out infinite" }}
      />
      <span
        aria-hidden
        className="absolute inset-x-6 -bottom-px h-px bg-gradient-to-r from-transparent via-sky-300 to-transparent"
      />
      <span className="relative inline-flex items-center gap-2">{children}</span>
    </button>
  );
}
```

## Usage

```tsx
import { ShimmerButton } from "@/components/ui/shimmer-button";

export default function Example() {
  return <ShimmerButton>Join the beta</ShimmerButton>;
}
```