Hover effects

Underline animation

<script>
	export let href;
	export let color = 'text-white';
	export let hoverColor = 'after:bg-white';
	export let weight = 'font-medium';
</script>

<a
	{href}
	class={`relative inline-block ${weight} ${color} after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:origin-bottom-right after:scale-x-0 ${hoverColor} after:transition-transform after:duration-[350ms] after:ease-out after:content-[''] hover:after:origin-bottom-left hover:after:scale-x-100`}
>
	<slot></slot>
</a>

Last updated