Update button style, to improve looks while adding a large enough touch-target

src/lib/components/ui/Button.svelte

@@ -19,42 +19,54 @@
 {#if isLink}
 	<a
 		{href}
-		class="btn {color}"
+		class="hitbox-wrapper"
 		target={isExternal ? '_blank' : undefined}
 		rel={isExternal ? 'noopener noreferrer' : undefined}
 		{...rest}
-	>
-		{@render children?.()}
+		><span class="btn {color}">
+			{@render children?.()}
+		</span>
 	</a>
 {:else}
-	<button class="btn {color}" {onclick} {...rest}>
-		{@render children?.()}
+	<button class="hitbox-wrapper" {onclick} {...rest}>
+		<span class="btn {color}">{@render children?.()}</span>
 	</button>
 {/if}
 
 <style>
-	.btn {
+	.hitbox-wrapper {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		padding: 0.4rem 1.2rem;
-		width: fit-content;
-		min-width: 90px;
 		min-height: 48px;
+		min-width: 48px;
+		appearance: none;
+		background: transparent;
 		border: none;
-		border-radius: 20px;
+		padding: 0 4px;
 		cursor: pointer;
 		text-decoration: none;
-		font-family: 'URW Gothic', sans-serif;
-		letter-spacing: 0.05ch;
-		font-size: 1rem;
-		font-weight: 600;
-		transition: all 0.2s;
-		box-shadow: var(--shadow-std);
-		user-select: none;
-		-webkit-user-select: none;
 		-webkit-tap-highlight-color: transparent;
-		touch-action: manipulation;
+	}
+	.btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: fit-content;
+		flex-shrink: 0;
+		padding: 0 1.2rem;
+		min-width: 90px;
+		height: 36px;
+		border-radius: 20px;
+		border: none;
+		box-shadow: var(--shadow-std);
+		font-family: 'URW Gothic', sans-serif;
+		font-size: 0.93rem;
+		font-weight: 600;
+		letter-spacing: 0.05ch;
+		transition:
+			all 0.1s ease,
+			box-shadow 0.2s;
 	}
 
 	.accent {
@@ -72,11 +84,11 @@
 		color: var(--color-title);
 	}
 
-	.btn:hover {
+	.hitbox-wrapper:hover .btn {
 		filter: brightness(1.5);
 	}
 
-	.btn.active {
+	.hitbox-wrapper:active .btn {
 		transform: scale(0.98);
 	}
 </style>