# Aurora Button

> Button with a continuously flowing blue/purple/green aurora gradient and a matching outer glow.

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

## Install

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

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

## Dependencies

No extra dependencies.

## Usage

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

import { AuroraButton } from "@/components/aurora-button"

export default function AuroraButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6 rounded-2xl bg-zinc-950 p-12">
      <AuroraButton>
        <Sparkles className="size-4" /> Aurora
      </AuroraButton>
      <AuroraButton duration={2.5}>Fast flow</AuroraButton>
    </div>
  )
}
```

## Source

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

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

const css = `@keyframes aurora-button-flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@media (prefers-reduced-motion:reduce){.aurora-button-glow,.aurora-button-bg{animation:none!important}}`

const gradient = "linear-gradient(120deg, #3b82f6, #8b5cf6, #22c55e, #06b6d4, #3b82f6, #8b5cf6)"

export interface AuroraButtonProps extends React.ComponentProps<"button"> {
  /** Seconds for one full gradient cycle */
  duration?: number
}

export function AuroraButton({ duration = 6, className, children, ...props }: AuroraButtonProps) {
  const animation = `aurora-button-flow ${duration}s ease-in-out infinite`

  return (
    <>
      <style href="aurora-button" precedence="default">
        {css}
      </style>
      <button
        className={cn(
          "group relative isolate inline-flex h-12 items-center justify-center rounded-xl px-8 text-sm font-semibold text-white",
          "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
          aria-hidden
          className="aurora-button-glow pointer-events-none absolute -inset-0.5 -z-10 rounded-[14px] opacity-50 blur-lg transition-opacity duration-300 group-hover:opacity-90"
          style={{ backgroundImage: gradient, backgroundSize: "300% 300%", animation }}
        />
        <span
          aria-hidden
          className="aurora-button-bg pointer-events-none absolute inset-0 -z-10 rounded-xl shadow-[inset_0_1px_0_rgba(255,255,255,0.35)]"
          style={{ backgroundImage: gradient, backgroundSize: "300% 300%", animation }}
        />
        <span className="relative inline-flex items-center gap-2 [text-shadow:0_1px_2px_rgba(0,0,0,0.35)]">{children}</span>
      </button>
    </>
  )
}
```