diff --git a/change/@fluentui-react-button-e077c324-5356-4fbf-984e-1005aa0666b1.json b/change/@fluentui-react-button-e077c324-5356-4fbf-984e-1005aa0666b1.json
new file mode 100644
index 00000000000000..304def593da4ec
--- /dev/null
+++ b/change/@fluentui-react-button-e077c324-5356-4fbf-984e-1005aa0666b1.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "differentiate between hover and pointer for hover styles",
+  "packageName": "@fluentui/react-button",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts b/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts
index 1c84b08dfeb2d3..de262c0a25184f 100644
--- a/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts
+++ b/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts
@@ -42,12 +42,15 @@ const useRootBaseClassName = makeResetStyles({
   fontFamily: tokens.fontFamilyBase,
   outlineStyle: 'none',
 
-  ':hover': {
-    backgroundColor: tokens.colorNeutralBackground1Hover,
-    borderColor: tokens.colorNeutralStroke1Hover,
-    color: tokens.colorNeutralForeground1Hover,
+  // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+  '@media (any-hover: hover)': {
+    ':hover': {
+      backgroundColor: tokens.colorNeutralBackground1Hover,
+      borderColor: tokens.colorNeutralStroke1Hover,
+      color: tokens.colorNeutralForeground1Hover,
 
-    cursor: 'pointer',
+      cursor: 'pointer',
+    },
   },
 
   ':hover:active': {
@@ -83,11 +86,14 @@ const useRootBaseClassName = makeResetStyles({
       borderColor: 'ButtonText',
     },
 
-    ':hover': {
-      backgroundColor: 'HighlightText',
-      borderColor: 'Highlight',
-      color: 'Highlight',
-      forcedColorAdjust: 'none',
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        backgroundColor: 'HighlightText',
+        borderColor: 'Highlight',
+        color: 'Highlight',
+        forcedColorAdjust: 'none',
+      },
     },
 
     ':hover:active': {
@@ -138,8 +144,11 @@ const useRootStyles = makeStyles({
   outline: {
     backgroundColor: tokens.colorTransparentBackground,
 
-    ':hover': {
-      backgroundColor: tokens.colorTransparentBackgroundHover,
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        backgroundColor: tokens.colorTransparentBackgroundHover,
+      },
     },
 
     ':hover:active': {
@@ -151,10 +160,13 @@ const useRootStyles = makeStyles({
     ...shorthands.borderColor('transparent'),
     color: tokens.colorNeutralForegroundOnBrand,
 
-    ':hover': {
-      backgroundColor: tokens.colorBrandBackgroundHover,
-      ...shorthands.borderColor('transparent'),
-      color: tokens.colorNeutralForegroundOnBrand,
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        backgroundColor: tokens.colorBrandBackgroundHover,
+        ...shorthands.borderColor('transparent'),
+        color: tokens.colorNeutralForegroundOnBrand,
+      },
     },
 
     ':hover:active': {
@@ -168,11 +180,13 @@ const useRootStyles = makeStyles({
       ...shorthands.borderColor('HighlightText'),
       color: 'HighlightText',
       forcedColorAdjust: 'none',
-
-      ':hover': {
-        backgroundColor: 'HighlightText',
-        ...shorthands.borderColor('Highlight'),
-        color: 'Highlight',
+      // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+      '@media (any-hover: hover)': {
+        ':hover': {
+          backgroundColor: 'HighlightText',
+          ...shorthands.borderColor('Highlight'),
+          color: 'Highlight',
+        },
       },
 
       ':hover:active': {
@@ -189,19 +203,21 @@ const useRootStyles = makeStyles({
     backgroundColor: tokens.colorSubtleBackground,
     ...shorthands.borderColor('transparent'),
     color: tokens.colorNeutralForeground2,
-
-    ':hover': {
-      backgroundColor: tokens.colorSubtleBackgroundHover,
-      ...shorthands.borderColor('transparent'),
-      color: tokens.colorNeutralForeground2Hover,
-      [`& .${iconFilledClassName}`]: {
-        display: 'inline',
-      },
-      [`& .${iconRegularClassName}`]: {
-        display: 'none',
-      },
-      [`& .${buttonClassNames.icon}`]: {
-        color: tokens.colorNeutralForeground2BrandHover,
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        backgroundColor: tokens.colorSubtleBackgroundHover,
+        ...shorthands.borderColor('transparent'),
+        color: tokens.colorNeutralForeground2Hover,
+        [`& .${iconFilledClassName}`]: {
+          display: 'inline',
+        },
+        [`& .${iconRegularClassName}`]: {
+          display: 'none',
+        },
+        [`& .${buttonClassNames.icon}`]: {
+          color: tokens.colorNeutralForeground2BrandHover,
+        },
       },
     },
 
@@ -221,11 +237,14 @@ const useRootStyles = makeStyles({
     },
 
     '@media (forced-colors: active)': {
-      ':hover': {
-        color: 'Highlight',
-
-        [`& .${buttonClassNames.icon}`]: {
+      // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+      '@media (any-hover: hover)': {
+        ':hover': {
           color: 'Highlight',
+
+          [`& .${buttonClassNames.icon}`]: {
+            color: 'Highlight',
+          },
         },
       },
       ':hover:active': {
@@ -241,16 +260,18 @@ const useRootStyles = makeStyles({
     backgroundColor: tokens.colorTransparentBackground,
     ...shorthands.borderColor('transparent'),
     color: tokens.colorNeutralForeground2,
-
-    ':hover': {
-      backgroundColor: tokens.colorTransparentBackgroundHover,
-      ...shorthands.borderColor('transparent'),
-      color: tokens.colorNeutralForeground2BrandHover,
-      [`& .${iconFilledClassName}`]: {
-        display: 'inline',
-      },
-      [`& .${iconRegularClassName}`]: {
-        display: 'none',
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        backgroundColor: tokens.colorTransparentBackgroundHover,
+        ...shorthands.borderColor('transparent'),
+        color: tokens.colorNeutralForeground2BrandHover,
+        [`& .${iconFilledClassName}`]: {
+          display: 'inline',
+        },
+        [`& .${iconRegularClassName}`]: {
+          display: 'none',
+        },
       },
     },
 
@@ -267,9 +288,12 @@ const useRootStyles = makeStyles({
     },
 
     '@media (forced-colors: active)': {
-      ':hover': {
-        backgroundColor: tokens.colorTransparentBackground,
-        color: 'Highlight',
+      // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+      '@media (any-hover: hover)': {
+        ':hover': {
+          backgroundColor: tokens.colorTransparentBackground,
+          color: 'Highlight',
+        },
       },
       ':hover:active': {
         backgroundColor: tokens.colorTransparentBackground,
@@ -328,22 +352,24 @@ const useRootDisabledStyles = makeStyles({
     [`& .${buttonClassNames.icon}`]: {
       color: tokens.colorNeutralForegroundDisabled,
     },
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        backgroundColor: tokens.colorNeutralBackgroundDisabled,
+        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+        color: tokens.colorNeutralForegroundDisabled,
 
-    ':hover': {
-      backgroundColor: tokens.colorNeutralBackgroundDisabled,
-      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
-      color: tokens.colorNeutralForegroundDisabled,
-
-      cursor: 'not-allowed',
+        cursor: 'not-allowed',
 
-      [`& .${iconFilledClassName}`]: {
-        display: 'none',
-      },
-      [`& .${iconRegularClassName}`]: {
-        display: 'inline',
-      },
-      [`& .${buttonClassNames.icon}`]: {
-        color: tokens.colorNeutralForegroundDisabled,
+        [`& .${iconFilledClassName}`]: {
+          display: 'none',
+        },
+        [`& .${iconRegularClassName}`]: {
+          display: 'inline',
+        },
+        [`& .${buttonClassNames.icon}`]: {
+          color: tokens.colorNeutralForegroundDisabled,
+        },
       },
     },
 
@@ -376,11 +402,13 @@ const useRootDisabledStyles = makeStyles({
       ':focus': {
         ...shorthands.borderColor('GrayText'),
       },
-
-      ':hover': {
-        backgroundColor: 'ButtonFace',
-        ...shorthands.borderColor('GrayText'),
-        color: 'GrayText',
+      // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+      '@media (any-hover: hover)': {
+        ':hover': {
+          backgroundColor: 'ButtonFace',
+          ...shorthands.borderColor('GrayText'),
+          color: 'GrayText',
+        },
       },
 
       ':hover:active': {
@@ -394,9 +422,11 @@ const useRootDisabledStyles = makeStyles({
   // Appearance variations
   outline: {
     backgroundColor: tokens.colorTransparentBackground,
-
-    ':hover': {
-      backgroundColor: tokens.colorTransparentBackground,
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        backgroundColor: tokens.colorTransparentBackground,
+      },
     },
 
     ':hover:active': {
@@ -405,9 +435,11 @@ const useRootDisabledStyles = makeStyles({
   },
   primary: {
     ...shorthands.borderColor('transparent'),
-
-    ':hover': {
-      ...shorthands.borderColor('transparent'),
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        ...shorthands.borderColor('transparent'),
+      },
     },
 
     ':hover:active': {
@@ -420,10 +452,12 @@ const useRootDisabledStyles = makeStyles({
   subtle: {
     backgroundColor: tokens.colorTransparentBackground,
     ...shorthands.borderColor('transparent'),
-
-    ':hover': {
-      backgroundColor: tokens.colorTransparentBackground,
-      ...shorthands.borderColor('transparent'),
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        backgroundColor: tokens.colorTransparentBackground,
+        ...shorthands.borderColor('transparent'),
+      },
     },
 
     ':hover:active': {
@@ -434,10 +468,12 @@ const useRootDisabledStyles = makeStyles({
   transparent: {
     backgroundColor: tokens.colorTransparentBackground,
     ...shorthands.borderColor('transparent'),
-
-    ':hover': {
-      backgroundColor: tokens.colorTransparentBackground,
-      ...shorthands.borderColor('transparent'),
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        backgroundColor: tokens.colorTransparentBackground,
+        ...shorthands.borderColor('transparent'),
+      },
     },
 
     ':hover:active': {
@@ -460,9 +496,12 @@ const useRootFocusStyles = makeStyles({
     ...createCustomFocusIndicatorStyle({
       ...shorthands.borderColor(tokens.colorStrokeFocus2),
       boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset,  0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`,
-      ':hover': {
-        boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset`,
-        ...shorthands.borderColor(tokens.colorStrokeFocus2),
+      // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+      '@media (any-hover: hover)': {
+        ':hover': {
+          boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset`,
+          ...shorthands.borderColor(tokens.colorStrokeFocus2),
+        },
       },
     }),
 
@@ -470,8 +509,11 @@ const useRootFocusStyles = makeStyles({
     '@supports (-moz-appearance:button)': {
       ...createCustomFocusIndicatorStyle({
         boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset,  0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`,
-        ':hover': {
-          boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset`,
+        // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+        '@media (any-hover: hover)': {
+          ':hover': {
+            boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset`,
+          },
         },
       }),
     },
diff --git a/packages/react-components/react-button/library/src/components/CompoundButton/useCompoundButtonStyles.styles.ts b/packages/react-components/react-button/library/src/components/CompoundButton/useCompoundButtonStyles.styles.ts
index 9916fcecadfafc..3047f6d5bc4c4f 100644
--- a/packages/react-components/react-button/library/src/components/CompoundButton/useCompoundButtonStyles.styles.ts
+++ b/packages/react-components/react-button/library/src/components/CompoundButton/useCompoundButtonStyles.styles.ts
@@ -19,10 +19,12 @@ const useRootStyles = makeStyles({
     [`& .${compoundButtonClassNames.secondaryContent}`]: {
       color: tokens.colorNeutralForeground2,
     },
-
-    ':hover': {
-      [`& .${compoundButtonClassNames.secondaryContent}`]: {
-        color: tokens.colorNeutralForeground2Hover,
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+          color: tokens.colorNeutralForeground2Hover,
+        },
       },
     },
 
@@ -36,9 +38,12 @@ const useRootStyles = makeStyles({
   // High contrast styles
   highContrast: {
     '@media (forced-colors: active)': {
-      ':hover': {
-        [`& .${compoundButtonClassNames.secondaryContent}`]: {
-          color: 'Highlight',
+      // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+      '@media (any-hover: hover)': {
+        ':hover': {
+          [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: 'Highlight',
+          },
         },
       },
 
@@ -58,10 +63,12 @@ const useRootStyles = makeStyles({
     [`& .${compoundButtonClassNames.secondaryContent}`]: {
       color: tokens.colorNeutralForegroundOnBrand,
     },
-
-    ':hover': {
-      [`& .${compoundButtonClassNames.secondaryContent}`]: {
-        color: tokens.colorNeutralForegroundOnBrand,
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+          color: tokens.colorNeutralForegroundOnBrand,
+        },
       },
     },
 
@@ -84,10 +91,12 @@ const useRootStyles = makeStyles({
     [`& .${compoundButtonClassNames.secondaryContent}`]: {
       color: tokens.colorNeutralForeground2,
     },
-
-    ':hover': {
-      [`& .${compoundButtonClassNames.secondaryContent}`]: {
-        color: tokens.colorNeutralForeground2Hover,
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+          color: tokens.colorNeutralForeground2Hover,
+        },
       },
     },
 
@@ -98,9 +107,12 @@ const useRootStyles = makeStyles({
     },
 
     '@media (forced-colors: active)': {
-      ':hover': {
-        [`& .${compoundButtonClassNames.secondaryContent}`]: {
-          color: 'Canvas',
+      // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+      '@media (any-hover: hover)': {
+        ':hover': {
+          [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: 'Canvas',
+          },
         },
       },
       ':hover:active': {
@@ -115,9 +127,12 @@ const useRootStyles = makeStyles({
       color: tokens.colorNeutralForeground2,
     },
 
-    ':hover': {
-      [`& .${compoundButtonClassNames.secondaryContent}`]: {
-        color: tokens.colorNeutralForeground2BrandHover,
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+          color: tokens.colorNeutralForeground2BrandHover,
+        },
       },
     },
 
@@ -153,10 +168,12 @@ const useRootStyles = makeStyles({
     [`& .${compoundButtonClassNames.secondaryContent}`]: {
       color: tokens.colorNeutralForegroundDisabled,
     },
-
-    ':hover': {
-      [`& .${compoundButtonClassNames.secondaryContent}`]: {
-        color: tokens.colorNeutralForegroundDisabled,
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+          color: tokens.colorNeutralForegroundDisabled,
+        },
       },
     },
 
@@ -173,10 +190,12 @@ const useRootStyles = makeStyles({
       [`& .${compoundButtonClassNames.secondaryContent}`]: {
         color: 'GrayText',
       },
-
-      ':hover': {
-        [`& .${compoundButtonClassNames.secondaryContent}`]: {
-          color: 'GrayText',
+      // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+      '@media (any-hover: hover)': {
+        ':hover': {
+          [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: 'GrayText',
+          },
         },
       },
 
diff --git a/packages/react-components/react-button/library/src/components/MenuButton/useMenuButtonStyles.styles.ts b/packages/react-components/react-button/library/src/components/MenuButton/useMenuButtonStyles.styles.ts
index 5eb7412fdced45..81680d1fe319db 100644
--- a/packages/react-components/react-button/library/src/components/MenuButton/useMenuButtonStyles.styles.ts
+++ b/packages/react-components/react-button/library/src/components/MenuButton/useMenuButtonStyles.styles.ts
@@ -65,8 +65,11 @@ const useIconExpandedStyles = makeStyles({
   highContrast: {
     // High contrast styles
     '@media (forced-colors: active)': {
-      ':hover': {
-        color: 'Canvas',
+      // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+      '@media (any-hover: hover)': {
+        ':hover': {
+          color: 'Canvas',
+        },
       },
     },
   },
diff --git a/packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts b/packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts
index 7115b633bda11c..f7fad112498d96 100644
--- a/packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts
+++ b/packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts
@@ -52,10 +52,12 @@ const useRootStyles = makeStyles({
     [`& .${splitButtonClassNames.primaryActionButton}`]: {
       borderRightColor: tokens.colorNeutralStrokeOnBrand,
     },
-
-    ':hover': {
-      [`& .${splitButtonClassNames.primaryActionButton}`]: {
-        borderRightColor: tokens.colorNeutralStrokeOnBrand,
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        [`& .${splitButtonClassNames.primaryActionButton}`]: {
+          borderRightColor: tokens.colorNeutralStrokeOnBrand,
+        },
       },
     },
 
@@ -69,10 +71,12 @@ const useRootStyles = makeStyles({
       [`& .${splitButtonClassNames.primaryActionButton}`]: {
         borderRightColor: 'HighlightText',
       },
-
-      ':hover': {
-        [`& .${splitButtonClassNames.primaryActionButton}`]: {
-          borderRightColor: 'Highlight',
+      // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+      '@media (any-hover: hover)': {
+        ':hover': {
+          [`& .${splitButtonClassNames.primaryActionButton}`]: {
+            borderRightColor: 'Highlight',
+          },
         },
       },
 
@@ -90,10 +94,12 @@ const useRootStyles = makeStyles({
     [`& .${splitButtonClassNames.primaryActionButton}`]: {
       borderRightColor: tokens.colorNeutralStroke1,
     },
-
-    ':hover': {
-      [`& .${splitButtonClassNames.primaryActionButton}`]: {
-        borderRightColor: tokens.colorNeutralStroke1Hover,
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        [`& .${splitButtonClassNames.primaryActionButton}`]: {
+          borderRightColor: tokens.colorNeutralStroke1Hover,
+        },
       },
     },
 
@@ -107,10 +113,12 @@ const useRootStyles = makeStyles({
     [`& .${splitButtonClassNames.primaryActionButton}`]: {
       borderRightColor: tokens.colorNeutralStroke1,
     },
-
-    ':hover': {
-      [`& .${splitButtonClassNames.primaryActionButton}`]: {
-        borderRightColor: tokens.colorNeutralStroke1Hover,
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        [`& .${splitButtonClassNames.primaryActionButton}`]: {
+          borderRightColor: tokens.colorNeutralStroke1Hover,
+        },
       },
     },
 
@@ -131,10 +139,12 @@ const useRootStyles = makeStyles({
     [`& .${splitButtonClassNames.primaryActionButton}`]: {
       borderRightColor: tokens.colorNeutralStrokeDisabled,
     },
-
-    ':hover': {
-      [`& .${splitButtonClassNames.primaryActionButton}`]: {
-        borderRightColor: tokens.colorNeutralStrokeDisabled,
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        [`& .${splitButtonClassNames.primaryActionButton}`]: {
+          borderRightColor: tokens.colorNeutralStrokeDisabled,
+        },
       },
     },
 
@@ -151,10 +161,12 @@ const useRootStyles = makeStyles({
       [`& .${splitButtonClassNames.primaryActionButton}`]: {
         borderRightColor: 'GrayText',
       },
-
-      ':hover': {
-        [`& .${splitButtonClassNames.primaryActionButton}`]: {
-          borderRightColor: 'GrayText',
+      // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+      '@media (any-hover: hover)': {
+        ':hover': {
+          [`& .${splitButtonClassNames.primaryActionButton}`]: {
+            borderRightColor: 'GrayText',
+          },
         },
       },
 
diff --git a/packages/react-components/react-button/library/src/components/ToggleButton/useToggleButtonStyles.styles.ts b/packages/react-components/react-button/library/src/components/ToggleButton/useToggleButtonStyles.styles.ts
index 885928459ddc7c..26d52b2b501e26 100644
--- a/packages/react-components/react-button/library/src/components/ToggleButton/useToggleButtonStyles.styles.ts
+++ b/packages/react-components/react-button/library/src/components/ToggleButton/useToggleButtonStyles.styles.ts
@@ -27,11 +27,13 @@ const useRootCheckedStyles = makeStyles({
     [`& .${iconRegularClassName}`]: {
       display: 'none',
     },
-
-    ':hover': {
-      backgroundColor: tokens.colorNeutralBackground1Hover,
-      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
-      color: tokens.colorNeutralForeground1Hover,
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        backgroundColor: tokens.colorNeutralBackground1Hover,
+        ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
+        color: tokens.colorNeutralForeground1Hover,
+      },
     },
 
     ':hover:active': {
@@ -48,11 +50,13 @@ const useRootCheckedStyles = makeStyles({
       ...shorthands.borderColor('Highlight'),
       color: 'HighlightText',
       forcedColorAdjust: 'none',
-
-      ':hover': {
-        backgroundColor: 'HighlightText',
-        ...shorthands.borderColor('Highlight'),
-        color: 'Highlight',
+      // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+      '@media (any-hover: hover)': {
+        ':hover': {
+          backgroundColor: 'HighlightText',
+          ...shorthands.borderColor('Highlight'),
+          color: 'Highlight',
+        },
       },
 
       ':hover:active': {
@@ -73,9 +77,11 @@ const useRootCheckedStyles = makeStyles({
     backgroundColor: tokens.colorTransparentBackgroundSelected,
     ...shorthands.borderColor(tokens.colorNeutralStroke1),
     ...shorthands.borderWidth(tokens.strokeWidthThicker),
-
-    ':hover': {
-      backgroundColor: tokens.colorTransparentBackgroundHover,
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        backgroundColor: tokens.colorTransparentBackgroundHover,
+      },
     },
 
     ':hover:active': {
@@ -90,11 +96,13 @@ const useRootCheckedStyles = makeStyles({
     backgroundColor: tokens.colorBrandBackgroundSelected,
     ...shorthands.borderColor('transparent'),
     color: tokens.colorNeutralForegroundOnBrand,
-
-    ':hover': {
-      backgroundColor: tokens.colorBrandBackgroundHover,
-      ...shorthands.borderColor('transparent'),
-      color: tokens.colorNeutralForegroundOnBrand,
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        backgroundColor: tokens.colorBrandBackgroundHover,
+        ...shorthands.borderColor('transparent'),
+        color: tokens.colorNeutralForegroundOnBrand,
+      },
     },
 
     ':hover:active': {
@@ -110,11 +118,13 @@ const useRootCheckedStyles = makeStyles({
     backgroundColor: tokens.colorSubtleBackgroundSelected,
     ...shorthands.borderColor('transparent'),
     color: tokens.colorNeutralForeground2Selected,
-
-    ':hover': {
-      backgroundColor: tokens.colorSubtleBackgroundHover,
-      ...shorthands.borderColor('transparent'),
-      color: tokens.colorNeutralForeground2Hover,
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        backgroundColor: tokens.colorSubtleBackgroundHover,
+        ...shorthands.borderColor('transparent'),
+        color: tokens.colorNeutralForeground2Hover,
+      },
     },
 
     ':hover:active': {
@@ -127,11 +137,13 @@ const useRootCheckedStyles = makeStyles({
     backgroundColor: tokens.colorTransparentBackgroundSelected,
     ...shorthands.borderColor('transparent'),
     color: tokens.colorNeutralForeground2BrandSelected,
-
-    ':hover': {
-      backgroundColor: tokens.colorTransparentBackgroundHover,
-      ...shorthands.borderColor('transparent'),
-      color: tokens.colorNeutralForeground2BrandHover,
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        backgroundColor: tokens.colorTransparentBackgroundHover,
+        ...shorthands.borderColor('transparent'),
+        color: tokens.colorNeutralForeground2BrandHover,
+      },
     },
 
     ':hover:active': {
@@ -148,11 +160,13 @@ const useRootDisabledStyles = makeStyles({
     backgroundColor: tokens.colorNeutralBackgroundDisabled,
     ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
     color: tokens.colorNeutralForegroundDisabled,
-
-    ':hover': {
-      backgroundColor: tokens.colorNeutralBackgroundDisabled,
-      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
-      color: tokens.colorNeutralForegroundDisabled,
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        backgroundColor: tokens.colorNeutralBackgroundDisabled,
+        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+        color: tokens.colorNeutralForegroundDisabled,
+      },
     },
 
     ':hover:active': {
@@ -168,9 +182,11 @@ const useRootDisabledStyles = makeStyles({
   },
   primary: {
     ...shorthands.borderColor('transparent'),
-
-    ':hover': {
-      ...shorthands.borderColor('transparent'),
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        ...shorthands.borderColor('transparent'),
+      },
     },
 
     ':hover:active': {
@@ -183,10 +199,12 @@ const useRootDisabledStyles = makeStyles({
   subtle: {
     backgroundColor: tokens.colorTransparentBackground,
     ...shorthands.borderColor('transparent'),
-
-    ':hover': {
-      backgroundColor: tokens.colorTransparentBackgroundHover,
-      ...shorthands.borderColor('transparent'),
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        backgroundColor: tokens.colorTransparentBackgroundHover,
+        ...shorthands.borderColor('transparent'),
+      },
     },
 
     ':hover:active': {
@@ -197,10 +215,12 @@ const useRootDisabledStyles = makeStyles({
   transparent: {
     backgroundColor: tokens.colorTransparentBackground,
     ...shorthands.borderColor('transparent'),
-
-    ':hover': {
-      backgroundColor: tokens.colorTransparentBackgroundHover,
-      ...shorthands.borderColor('transparent'),
+    // Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
+    '@media (any-hover: hover)': {
+      ':hover': {
+        backgroundColor: tokens.colorTransparentBackgroundHover,
+        ...shorthands.borderColor('transparent'),
+      },
     },
 
     ':hover:active': {