fix: apply button hover states only on supported devices (#21724)

devadula-nandan · web-flow · commit 2d4cb70148e6 · 2026-04-16T03:52:54.000Z
* fix: apply button hover states only on supported devices

* chore: move comment above media

* chore: update copyright year

* fix: review comments

* fix: more cases on mobile

* chore: update hover to any-hover to support hybrid setups
diff --git a/packages/styles/scss/components/button/_button.scss b/packages/styles/scss/components/button/_button.scss
@@ -164,8 +164,10 @@
       $button-tertiary-active
     );
 
-    &:hover {
-      color: $text-inverse;
+    @media (any-hover: hover) {
+      &:hover {
+        color: $text-inverse;
+      }
     }
 
     &:focus {
@@ -211,13 +213,16 @@
       margin-inline-start: $spacing-03;
     }
 
-    &:hover,
-    &:active {
-      color: $link-primary-hover;
+    // Apply hover styles only on devices that support hover
+    @media (hover: hover) {
+      &:hover {
+        color: $link-primary-hover;
+      }
     }
 
     &:active {
       background-color: $background-active;
+      color: $link-primary-hover;
     }
 
     &:disabled,
@@ -347,9 +352,11 @@
         $button-danger-active
       );
 
-      &:hover {
-        border-color: $button-danger-hover;
-        color: $text-on-color;
+      @media (hover: hover) {
+        &:hover {
+          border-color: $button-danger-hover;
+          color: $text-on-color;
+        }
       }
 
       &:focus {
@@ -394,7 +401,12 @@
         margin-inline-start: $spacing-03;
       }
 
-      &:hover,
+      @media (hover: hover) {
+        &:hover {
+          color: $text-on-color;
+        }
+      }
+
       &:active {
         color: $text-on-color;
       }
diff --git a/packages/styles/scss/components/button/_mixins.scss b/packages/styles/scss/components/button/_mixins.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// Copyright IBM Corp. 2016, 2026
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -123,8 +123,11 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
   background-color: $bg-color;
   color: $font-color;
 
-  &:hover {
-    background-color: $hover-bg-color;
+  // Apply hover styles only on devices that support hover
+  @media (any-hover: hover) {
+    &:hover {
+      background-color: $hover-bg-color;
+    }
   }
 
   &:focus {
