diff --git a/src/components/button/button-theme.scss b/src/components/button/button-theme.scss index b51a7eab942..16f7d224434 100644 --- a/src/components/button/button-theme.scss +++ b/src/components/button/button-theme.scss @@ -9,7 +9,6 @@ md-toolbar .md-button.md-THEME_NAME-theme.md-fab { border-radius: $button-border-radius; &:not([disabled]) { - &:hover, &:focus { background-color: '{{background-500-0.2}}'; } @@ -22,7 +21,6 @@ md-toolbar .md-button.md-THEME_NAME-theme.md-fab { color: '{{primary-contrast}}'; background-color: '{{primary-color}}'; &:not([disabled]) { - &:hover, &:focus { background-color: '{{primary-600}}'; } @@ -35,7 +33,6 @@ md-toolbar .md-button.md-THEME_NAME-theme.md-fab { background-color: '{{accent-color}}'; color: '{{accent-contrast}}'; &:not([disabled]) { - &:hover, &:focus { background-color: '{{accent-A700}}'; } @@ -46,7 +43,6 @@ md-toolbar .md-button.md-THEME_NAME-theme.md-fab { color: '{{background-contrast}}'; background-color: '{{background-50}}'; &:not([disabled]) { - &:hover, &:focus { background-color: '{{background-200}}'; } @@ -61,7 +57,6 @@ md-toolbar .md-button.md-THEME_NAME-theme.md-fab { color: '{{warn-contrast}}'; background-color: '{{warn-color}}'; &:not([disabled]) { - &:hover, &:focus { background-color: '{{warn-700}}'; } @@ -77,7 +72,6 @@ md-toolbar .md-button.md-THEME_NAME-theme.md-fab { color: '{{accent-contrast}}'; background-color: '{{accent-color}}'; &:not([disabled]) { - &:hover, &:focus { background-color: '{{accent-700}}'; } diff --git a/src/components/button/button.scss b/src/components/button/button.scss index b4e40ed492b..4c885d875fc 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -129,9 +129,11 @@ $button-fab-toast-offset: $button-fab-height * 0.75; &:not([disabled]) { &.md-raised, &.md-fab { - &:focus, - &:hover { transform: translate3d(0, -1px, 0); + &:focus { + @extend .md-shadow-bottom-z-1; + } + &:active { @extend .md-shadow-bottom-z-2; } }