diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss index 37d25a2a7376..61d4b5fd640b 100644 --- a/src/lib/button/_button-theme.scss +++ b/src/lib/button/_button-theme.scss @@ -85,7 +85,6 @@ background: transparent; @include _mat-button-theme-color($theme, 'color'); - @include _mat-button-ripple-color($theme, default, 0.1); } .mat-raised-button, .mat-fab, .mat-mini-fab { @@ -95,8 +94,21 @@ @include _mat-button-theme-color($theme, 'color', default-contrast); @include _mat-button-theme-color($theme, 'background-color'); + + // Add ripple effect with contrast color to buttons that don't have a focus overlay. @include _mat-button-ripple-color($theme, default-contrast); } + + // Add ripple effect with default color to the flat button, which doesn't have a focus overlay. + .mat-button { + @include _mat-button-ripple-color($theme, default, 0.1); + } + + // Add ripple effect with default color to the icon button. Ripple color needs to be stronger + // since the icon button doesn't have a focus overlay. + .mat-icon-button { + @include _mat-button-ripple-color($theme, default); + } // TODO(devversion): The color class accent should be just set from TS code. No need for this. .mat-fab, .mat-mini-fab {