Shiny Button

1<script lang="ts">
2	import { cn } from '$UTILS$';
3	import { buttonVariants } from '$lib/components/ui/button';
4	import type { Snippet } from 'svelte';
5	import type { VariantProps } from 'class-variance-authority';
6	import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
7 
8	type Props = (HTMLButtonAttributes & HTMLAnchorAttributes) &
9		VariantProps<typeof buttonVariants> & {
10			children: Snippet;
11		};
12 
13	let {
14		class: className,
15		variant = 'default',
16		size = 'default',
17		href = undefined,
18		children,
19		...rest
20	}: Props = $props();
21</script>
22 
23{#snippet ButtonContent()}
24	<div
25		class="shine-element absolute inset-0 -top-[20%] -bottom-[20%] z-0 hidden w-[50%] -translate-x-[200%] skew-x-[-20deg] bg-gradient-to-r from-transparent via-current to-transparent opacity-30 group-hover:animate-none md:block"
26		aria-hidden="true"
27	></div>
28 
29	<span class="relative z-10 flex items-center justify-center">
30		{@render children()}
31	</span>
32{/snippet}
33 
34{#if href}
35	<a
36		class={cn(
37			'relative overflow-hidden group cursor-pointer',
38			buttonVariants({ variant, size }),
39			className
40		)}
41		{href}
42		{...rest}
43	>
44		{@render ButtonContent()}
45	</a>
46{:else}
47	<button
48		class={cn(
49			'relative overflow-hidden group cursor-pointer',
50			buttonVariants({ variant, size }),
51			className
52		)}
53		{...rest}
54	>
55		{@render ButtonContent()}
56	</button>
57{/if}
58 
59<style>
60	.shine-element {
61		animation: shine 4s ease-in-out infinite;
62	}
63 
64	@keyframes shine {
65		0% {
66			left: -100%;
67		}
68		15% {
69			left: 210%;
70		}
71		100% {
72			left: 210%;
73		}
74	}
75</style>