interactive-hover-button

1"use client"
2 
3import React from "react"
4import { ArrowRight } from "lucide-react"
5import { cn } from "@/lib/utils"
6 
7interface InteractiveHoverButtonProps
8  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
9  text?: string
10}
11 
12const InteractiveHoverButton = React.forwardRef<
13  HTMLButtonElement,
14  InteractiveHoverButtonProps
15>(({ text = "Button", className, ...props }, ref) => {
16  return (
17    <button
18      ref={ref}
19      className={cn(
20        "group relative w-32 cursor-pointer overflow-hidden rounded-full border bg-background p-2 text-center font-semibold",
21        className,
22      )}
23      {...props}
24    >
25      <span className="inline-block translate-x-1 transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0">
26        {text}
27      </span>
28      <div className="absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-2 text-primary-foreground opacity-0 transition-all duration-300 group-hover:-translate-x-1 group-hover:opacity-100">
29        <span>{text}</span>
30        <ArrowRight />
31      </div>
32      <div className="absolute left-[20%] top-[40%] h-2 w-2 scale-[1] rounded-lg bg-primary transition-all duration-300 group-hover:left-[0%] group-hover:top-[0%] group-hover:h-full group-hover:w-full group-hover:scale-[1.8] group-hover:bg-primary"></div>
33    </button>
34  )
35})
36 
37InteractiveHoverButton.displayName = "InteractiveHoverButton"
38 
39export { InteractiveHoverButton }