diff --git a/src/material/button/button.scss b/src/material/button/button.scss index bda5d9394d2b..aca34d9ab351 100644 --- a/src/material/button/button.scss +++ b/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 { diff --git a/src/material/button/fab.scss b/src/material/button/fab.scss index 72e0c8133db1..de6e03f23c1e 100644 --- a/src/material/button/fab.scss +++ b/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 {