interactive-hover-button

1import { ArrowRight } from "lucide-react"
2 
3import { cn } from "@/lib/utils"
4 
5export function InteractiveHoverButton({
6  children,
7  className,
8  ...props
9}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
10  return (
11    <button
12      className={cn(
13        "group bg-background relative w-auto cursor-pointer overflow-hidden rounded-full border p-2 px-6 text-center font-semibold",
14        className
15      )}
16      {...props}
17    >
18      <div className="flex items-center justify-center gap-2">
19        <div className="bg-primary h-2 w-2 rounded-full transition-all duration-300 group-hover:scale-[100.8]"></div>
20        <span className="inline-block transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0">
21          {children}
22        </span>
23      </div>
24      <div className="text-primary-foreground absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-2 opacity-0 transition-all duration-300 group-hover:-translate-x-5 group-hover:opacity-100">
25        <span>{children}</span>
26        <ArrowRight />
27      </div>
28    </button>
29  )
30}