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

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

Fixes angular#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 {