diff --git a/src/components.css b/src/components.css
index 3592de2..e0ccf5e 100644
--- a/src/components.css
+++ b/src/components.css
@@ -379,11 +379,13 @@
         --button-surface: var(--color-surface-container-highest);
       }
       &:hover {
-        --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
+        color: var(--button-text);
+        background-color: color-mix(in oklch, var(--button-text) 8%, transparent);
         box-shadow: var(--elevation-0);
       }
       &:active {
-        --button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
+        color: var(--button-text);
+        background-color: color-mix(in oklch, var(--button-text) 18%, transparent);
       }
     }
     &.tonal_icon:disabled {
@@ -399,11 +401,13 @@
         --button-surface: var(--color-inverse-surface);
       }
       &:hover {
-        --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
+        color: var(--button-text);
+        background-color: color-mix(in oklch, var(--button-text) 8%, transparent);
         box-shadow: var(--elevation-0);
       }
       &:active {
-        --button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
+        color: var(--button-text);
+        background-color: color-mix(in oklch, var(--button-text) 18%, transparent);
       }
     }
     &.outlined_icon:disabled {