fix(material/button): do not show hover state on devices that don't support hover

Disables the hover state for buttons on devices that don't support it (e.g. touch devices) since it can look off.

Fixes #31841.

Author: crisbeto

src/material/button/button.scss

@@ -15,6 +15,14 @@ $fallbacks: m3-button.get-tokens();
     min-height: fit-content;
     flex-shrink: 0;
   }
+
+  // Hide the hover ripple on devices that don't support hover. Note that we have the `span`
+  // in the selector in order to increase the specificity over the actual hover styles.
+  @media (hover: none) {
+    &:hover > span.mat-mdc-button-persistent-ripple::before {
+      opacity: 0;
+    }
+  }
 }
 
 .mdc-button {
@@ -163,8 +171,10 @@ $fallbacks: m3-button.get-tokens();
     border-radius: token-utils.slot(button-protected-container-shape, $fallbacks);
   }
 
-  &:hover {
-    box-shadow: token-utils.slot(button-protected-hover-container-elevation-shadow, $fallbacks);
+  @media (hover: hover) {
+    &:hover {
+      box-shadow: token-utils.slot(button-protected-hover-container-elevation-shadow, $fallbacks);
+    }
   }
 
   &:focus {

src/material/button/fab.scss

@@ -101,8 +101,10 @@ $fallbacks: m3-fab.get-tokens();
   color: token-utils.slot(fab-foreground-color, $fallbacks, inherit);
   box-shadow: token-utils.slot(fab-container-elevation-shadow, $fallbacks);
 
-  &:hover {
-    box-shadow: token-utils.slot(fab-hover-container-elevation-shadow, $fallbacks);
+  @media (hover: hover) {
+    &:hover {
+      box-shadow: token-utils.slot(fab-hover-container-elevation-shadow, $fallbacks);
+    }
   }
 
   &:focus {
@@ -133,8 +135,10 @@ $fallbacks: m3-fab.get-tokens();
   color: token-utils.slot(fab-small-foreground-color, $fallbacks, inherit);
   box-shadow: token-utils.slot(fab-small-container-elevation-shadow, $fallbacks);
 
-  &:hover {
-    box-shadow: token-utils.slot(fab-small-hover-container-elevation-shadow, $fallbacks);
+  @media (hover: hover) {
+    &:hover {
+      box-shadow: token-utils.slot(fab-small-hover-container-elevation-shadow, $fallbacks);
+    }
   }
 
   &:focus {
@@ -176,8 +180,10 @@ $fallbacks: m3-fab.get-tokens();
   font-weight: token-utils.slot(fab-extended-label-text-weight, $fallbacks);
   letter-spacing: token-utils.slot(fab-extended-label-text-tracking, $fallbacks);
 
-  &:hover {
-    box-shadow: token-utils.slot(fab-extended-hover-container-elevation-shadow, $fallbacks);
+  @media (hover: hover) {
+    &:hover {
+      box-shadow: token-utils.slot(fab-extended-hover-container-elevation-shadow, $fallbacks);
+    }
   }
 
   &:focus {