svelte-testing/src/components/misc/navbutton.svelte

<script>
	import {page} from '$app/stores';
	export let link = '';
	export let text = '';
</script>

<a href="{link}" class="">
<button class="{$page.url.pathname == link ? "active-now" : ""} text-murasaki md:text-xl py-2 px-4 font-montserrat font-semibold link-underline">
	{text}
</button>
</a>

<style>
	.active-now:before {
		content: '';
		position: absolute;
		width: 100%;
		transform: scaleX(1);
		height: 2px;
		bottom: 0;
		left: 0;
		background-color: #421727;
	}
	.link-underline {
		display: inline-block;
		position: relative;
		z-index: 0;
	}

	.link-underline:after {
		content: '';
		position: absolute;
		width: 100%;
		transform: scaleX(0);
		height: 2px;
		bottom: 0;
		left: 0;
		background-color: #421727;
		transform-origin: bottom right;
		transition: transform 0.25s ease-out;
		z-index: 0;
	}

	.link-underline:hover:after {
		transform: scaleX(1);
		transform-origin: bottom left;
		background-color: #421727;
		z-index: 0;
	}
</style>