[Button] Increase elevation on hover when contained (#17537)

mui · Sep 25, 2019 · d63c8e9 · d63c8e9
1 parent 4e88a6c
commit d63c8e9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/docs/src/pages/components/buttons/CustomizedButtons.js b/docs/src/pages/components/buttons/CustomizedButtons.js
@@ -29,6 +29,7 @@ const BootstrapButton = withStyles({
     '&:hover': {
       backgroundColor: '#0069d9',
       borderColor: '#0062cc',
+      boxShadow: 'none',
     },
     '&:active': {
       boxShadow: 'none',

diff --git a/docs/src/pages/components/buttons/CustomizedButtons.tsx b/docs/src/pages/components/buttons/CustomizedButtons.tsx
@@ -35,6 +35,7 @@ const BootstrapButton = withStyles({
     '&:hover': {
       backgroundColor: '#0069d9',
       borderColor: '#0062cc',
+      boxShadow: 'none',
     },
     '&:active': {
       boxShadow: 'none',

diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js
@@ -110,6 +110,18 @@ export const styles = theme => ({
     color: theme.palette.getContrastText(theme.palette.grey[300]),
     backgroundColor: theme.palette.grey[300],
     boxShadow: theme.shadows[2],
+    '&:hover': {
+      backgroundColor: theme.palette.grey.A100,
+      boxShadow: theme.shadows[4],
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        boxShadow: theme.shadows[2],
+        backgroundColor: theme.palette.grey[300],
+      },
+      '&$disabled': {
+        backgroundColor: theme.palette.action.disabledBackground,
+      },
+    },
     '&$focusVisible': {
       boxShadow: theme.shadows[6],
     },
@@ -121,16 +133,6 @@ export const styles = theme => ({
       boxShadow: theme.shadows[0],
       backgroundColor: theme.palette.action.disabledBackground,
     },
-    '&:hover': {
-      backgroundColor: theme.palette.grey.A100,
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: theme.palette.grey[300],
-      },
-      '&$disabled': {
-        backgroundColor: theme.palette.action.disabledBackground,
-      },
-    },
   },
   /* Styles applied to the root element if `variant="contained"` and `color="primary"`. */
   containedPrimary: {