Interactive Hover Button

1<script lang="ts">
2	import { ArrowRight } from "@lucide/svelte";
3	import { cn } from "$UTILS$";
4	import type { Snippet } from "svelte";
5	import type { HTMLButtonAttributes } from "svelte/elements";
6 
7	interface InteractiveHoverButtonProps extends HTMLButtonAttributes {
8		children: Snippet;
9		class?: string;
10	}
11 
12	let { children, class: className, ...props }: InteractiveHoverButtonProps = $props();
13</script>
14 
15<button
16	class={cn(
17		"group bg-background relative w-auto cursor-pointer overflow-hidden rounded-full border p-2 px-6 text-center font-semibold",
18		className
19	)}
20	{...props}
21>
22	<div class="flex items-center gap-2">
23		<div
24			class="bg-primary h-2 w-2 rounded-full transition-all duration-300 group-hover:scale-[100.8]"
25		></div>
26		<span
27			class="inline-block transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0"
28		>
29			{@render children()}
30		</span>
31	</div>
32	<div
33		class="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"
34	>
35		<span>{@render children()}</span>
36		<ArrowRight />
37	</div>
38</button>