diff --git a/web/src/components/dialog/DialogButtons.svelte b/web/src/components/dialog/DialogButtons.svelte
index 5f086a78..3b9943e1 100644
--- a/web/src/components/dialog/DialogButtons.svelte
+++ b/web/src/components/dialog/DialogButtons.svelte
@@ -9,6 +9,7 @@
     {#each buttons as button}
         <button
             class="button popup-button {button.color}"
+            class:color={button.color}
             class:active={button.main}
             on:click={async () => {
                 await button.action();
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index d5fe935d..66fb9850 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -323,7 +323,7 @@
         background-color: var(--secondary);
     }
 
-    :global(.button.active:active) {
+    :global(.button.active:not(.color):active) {
         background-color: var(--button-active-hover);
     }
 
@@ -339,7 +339,7 @@
             background-color: var(--button-hover);
         }
 
-        :global(.button.active:hover) {
+        :global(.button.active:not(.color):hover) {
             background-color: var(--button-active-hover);
         }
     }