diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte
index b918b3fb..2b688795 100644
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
@@ -55,15 +55,16 @@
 			}
 		},
 		compoundVariants: [
-			// raised variants draw inset depth via a ::before layer.
+			// raised variants draw inset depth via a ::before layer. pressing shifts the
+			// content wrapper rather than the button itself, so the box stays put.
 			{
 				variant: "default",
 				insetShadow: true,
 				class: [
 					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)] before:transition-all before:duration-150 before:content-['']",
 					"hover:before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-strong-hover)]",
-					"active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-shadow-inner-subtle)]",
-					"disabled:active:translate-y-0"
+					"active:*:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-shadow-inner-subtle)]",
+					"disabled:active:*:translate-y-0"
 				]
 			},
 			{
@@ -71,8 +72,8 @@
 				insetShadow: true,
 				class: [
 					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:shadow-[inset_0_-2px_0_0_var(--color-alpha-dark-25)] before:transition-all before:duration-150 before:content-['']",
-					"active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-alpha-dark-50)]",
-					"disabled:active:translate-y-0"
+					"active:*:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-alpha-dark-50)]",
+					"disabled:active:*:translate-y-0"
 				]
 			}
 		],
@@ -134,19 +135,23 @@
 </script>
 
 {#snippet content()}
-	{#if loading}
-		<Spinner class={spinnerSize} />
-	{:else}
-		{#if Icon && iconSide == "left"}
-			<Icon class="{iconSize} shrink-0" aria-hidden="true" />
+	<!-- single wrapper so the press animation moves the label/icon, not the button box.
+	     gap-[inherit] keeps the size variant's gap working across the extra level. -->
+	<span class="inline-flex min-w-0 items-center justify-center gap-[inherit]">
+		{#if loading}
+			<Spinner class={spinnerSize} />
+		{:else}
+			{#if Icon && iconSide == "left"}
+				<Icon class="{iconSize} shrink-0" aria-hidden="true" />
+			{/if}
+			{#if children}
+				{@render children()}
+			{/if}
+			{#if Icon && iconSide == "right"}
+				<Icon class="{iconSize} shrink-0" aria-hidden="true" />
+			{/if}
 		{/if}
-		{#if children}
-			{@render children()}
-		{/if}
-		{#if Icon && iconSide == "right"}
-			<Icon class="{iconSize} shrink-0" aria-hidden="true" />
-		{/if}
-	{/if}
+	</span>
 {/snippet}
 
 {#if href}