# Outline Draw Button

> Button whose SVG outline draws itself along the path on hover or focus.

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

## Install

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

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

## Dependencies

No extra dependencies.

## Usage

```tsx title="components/outline-draw-button-demo.tsx"
import { OutlineDrawButton } from "@/components/outline-draw-button"

export default function OutlineDrawButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6 rounded-2xl bg-neutral-100 p-12 dark:bg-neutral-900">
      <OutlineDrawButton>Hover me</OutlineDrawButton>
      <OutlineDrawButton>Read the docs</OutlineDrawButton>
    </div>
  )
}
```

## Source

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

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

export function OutlineDrawButton({ className, children, ...props }: React.ComponentProps<"button">) {
  return (
    <button
      type="button"
      className={cn(
        "group relative inline-flex h-12 items-center justify-center px-9 text-sm font-medium tracking-wide text-foreground select-none",
        "focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring",
        "disabled:pointer-events-none disabled:opacity-50",
        className
      )}
      {...props}
    >
      <svg aria-hidden className="pointer-events-none absolute inset-0 size-full overflow-visible">
        <rect x="1" y="1" width="calc(100% - 2px)" height="calc(100% - 2px)" rx="10" fill="none" className="stroke-border" strokeWidth="2" />
        <rect
          x="1"
          y="1"
          width="calc(100% - 2px)"
          height="calc(100% - 2px)"
          rx="10"
          fill="none"
          pathLength={100}
          strokeWidth="2"
          strokeLinecap="round"
          strokeDasharray="100"
          className="stroke-violet-500 transition-[stroke-dashoffset] duration-700 ease-out [stroke-dashoffset:100] group-hover:[stroke-dashoffset:0] group-focus-visible:[stroke-dashoffset:0]"
        />
      </svg>
      <span className="relative transition-transform duration-300 group-active:scale-95">{children}</span>
    </button>
  )
}
```