diff --git a/app/javascript/styles/mastodon-material-dark/theme/button.scss b/app/javascript/styles/mastodon-material-dark/theme/button.scss
index 7c2ad7937..9c10a3894 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/button.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/button.scss
@@ -39,11 +39,12 @@
     }
 
     &:hover {
+        @include material-transition;
         color: $icon-button-hover-color;
         background-color: $icon-bg-hover-color;
     }
 
-    &:focus { transition: none }
+    &:focus { background-color: transparent }
 }
 
 // Checkbox with label
diff --git a/app/javascript/styles/mastodon-material-light/theme/button.scss b/app/javascript/styles/mastodon-material-light/theme/button.scss
index 7c2ad7937..9c10a3894 100644
--- a/app/javascript/styles/mastodon-material-light/theme/button.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/button.scss
@@ -39,11 +39,12 @@
     }
 
     &:hover {
+        @include material-transition;
         color: $icon-button-hover-color;
         background-color: $icon-bg-hover-color;
     }
 
-    &:focus { transition: none }
+    &:focus { background-color: transparent }
 }
 
 // Checkbox with label
diff --git a/app/javascript/styles/material-black/theme/button.scss b/app/javascript/styles/material-black/theme/button.scss
index 7c2ad7937..9c10a3894 100644
--- a/app/javascript/styles/material-black/theme/button.scss
+++ b/app/javascript/styles/material-black/theme/button.scss
@@ -39,11 +39,12 @@
     }
 
     &:hover {
+        @include material-transition;
         color: $icon-button-hover-color;
         background-color: $icon-bg-hover-color;
     }
 
-    &:focus { transition: none }
+    &:focus { background-color: transparent }
 }
 
 // Checkbox with label
diff --git a/app/javascript/styles/material-dark/theme/button.scss b/app/javascript/styles/material-dark/theme/button.scss
index 7c2ad7937..9c10a3894 100644
--- a/app/javascript/styles/material-dark/theme/button.scss
+++ b/app/javascript/styles/material-dark/theme/button.scss
@@ -39,11 +39,12 @@
     }
 
     &:hover {
+        @include material-transition;
         color: $icon-button-hover-color;
         background-color: $icon-bg-hover-color;
     }
 
-    &:focus { transition: none }
+    &:focus { background-color: transparent }
 }
 
 // Checkbox with label
diff --git a/app/javascript/styles/material-light/theme/button.scss b/app/javascript/styles/material-light/theme/button.scss
index 7c2ad7937..9c10a3894 100644
--- a/app/javascript/styles/material-light/theme/button.scss
+++ b/app/javascript/styles/material-light/theme/button.scss
@@ -39,11 +39,12 @@
     }
 
     &:hover {
+        @include material-transition;
         color: $icon-button-hover-color;
         background-color: $icon-bg-hover-color;
     }
 
-    &:focus { transition: none }
+    &:focus { background-color: transparent }
 }
 
 // Checkbox with label
diff --git a/app/javascript/styles/plus/theme/button.scss b/app/javascript/styles/plus/theme/button.scss
index 7c2ad7937..9c10a3894 100644
--- a/app/javascript/styles/plus/theme/button.scss
+++ b/app/javascript/styles/plus/theme/button.scss
@@ -39,11 +39,12 @@
     }
 
     &:hover {
+        @include material-transition;
         color: $icon-button-hover-color;
         background-color: $icon-bg-hover-color;
     }
 
-    &:focus { transition: none }
+    &:focus { background-color: transparent }
 }
 
 // Checkbox with label