# Interactive Hover Button

> On hover a dot expands to fill the button while the label slides out and an inverted label with an arrow slides in.

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

## Install

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

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

## Dependencies

```bash
npm install lucide-react
```

## Usage

```tsx title="components/interactive-hover-button-demo.tsx"
import { InteractiveHoverButton } from "@/components/interactive-hover-button"

export default function InteractiveHoverButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4 p-8">
      <InteractiveHoverButton>Hover me</InteractiveHoverButton>
      <InteractiveHoverButton className="w-52">Book a call</InteractiveHoverButton>
    </div>
  )
}
```

## Source

```tsx title="components/interactive-hover-button.tsx"
import * as React from "react"
import { ArrowRight } from "lucide-react"

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

export type InteractiveHoverButtonProps = React.ComponentProps<"button">

export function InteractiveHoverButton({ className, children, ...props }: InteractiveHoverButtonProps) {
  return (
    <button
      className={cn(
        "group relative inline-flex h-12 w-44 cursor-pointer items-center justify-center overflow-hidden rounded-full border border-border bg-background text-sm font-semibold text-foreground",
        "transition-colors duration-300 hover:border-primary",
        "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="absolute top-1/2 left-5 size-2 -translate-y-1/2 rounded-full bg-primary transition-transform duration-500 ease-out group-hover:scale-[60]"
      />
      <span className="relative ml-4 inline-flex items-center transition-all duration-300 group-hover:translate-x-10 group-hover:opacity-0">
        {children}
      </span>
      <span className="absolute inset-0 z-10 flex translate-x-10 items-center justify-center gap-2 text-primary-foreground opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
        {children}
        <ArrowRight className="size-4" />
      </span>
    </button>
  )
}
```