# Eclipse Button

> Black button where a “moon” slides aside on hover to reveal a glowing corona.

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

## Install

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

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

## Dependencies

No extra dependencies.

## Usage

```tsx title="components/eclipse-button-demo.tsx"
import { EclipseButton } from "@/components/eclipse-button"

export default function EclipseButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6 rounded-2xl bg-zinc-950 p-12">
      <EclipseButton>Eclipse</EclipseButton>
      <EclipseButton coronaColor="#38bdf8">Blue corona</EclipseButton>
      <EclipseButton coronaColor="#f43f5e">Blood moon</EclipseButton>
    </div>
  )
}
```

## Source

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

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

export interface EclipseButtonProps extends React.ComponentProps<"button"> {
  /** Color of the corona revealed on hover */
  coronaColor?: string
}

export function EclipseButton({ coronaColor = "#f59e0b", className, children, ...props }: EclipseButtonProps) {
  return (
    <button
      className={cn(
        "group relative isolate inline-flex h-12 items-center justify-center overflow-hidden rounded-full bg-black px-9 text-sm font-semibold tracking-wide text-white",
        "shadow-[0_0_0_1px_rgba(255,255,255,0.12)] 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="pointer-events-none absolute top-1/2 left-1/2 -z-20 size-24 -translate-x-1/2 -translate-y-1/2 scale-50 rounded-full opacity-0 blur-md transition-all duration-500 group-hover:scale-125 group-hover:opacity-100"
        style={{ background: `radial-gradient(circle, ${coronaColor} 0%, ${coronaColor}88 40%, transparent 70%)` }}
      />
      <span
        aria-hidden
        className="pointer-events-none absolute top-1/2 left-1/2 -z-10 size-[calc(100%-6px)] -translate-x-1/2 -translate-y-1/2 rounded-full bg-black transition-transform duration-500 ease-out group-hover:translate-x-[calc(-50%+14px)] group-hover:scale-x-[0.96]"
      />
      <span className="relative inline-flex items-center gap-2">{children}</span>
    </button>
  )
}
```