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>
  )
}

Install

More like this

Origin Button

Texture Button

Liquid Metal Button