refactor(button): render focus tint and ripples behind button content

src/material/button/_button-base.scss

@@ -63,7 +63,7 @@ $mat-mini-fab-padding: 8px !default;
   }
 
   &.cdk-keyboard-focused, &.cdk-program-focused {
-    .mat-button-focus-overlay {
+    &::before {
       opacity: 0.12;
     }
   }

src/material/button/_button-theme.scss

@@ -10,19 +10,19 @@ $_mat-button-ripple-opacity: 0.1;
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
 
-  &.mat-primary .mat-button-focus-overlay {
+  &.mat-primary::before {
     background-color: mat-color($primary);
   }
 
-  &.mat-accent .mat-button-focus-overlay {
+  &.mat-accent::before {
     background-color: mat-color($accent);
   }
 
-  &.mat-warn .mat-button-focus-overlay {
+  &.mat-warn::before {
     background-color: mat-color($warn);
   }
 
-  &[disabled] .mat-button-focus-overlay {
+  &[disabled]::before {
     background-color: transparent;
   }
 }
@@ -98,7 +98,7 @@ $_mat-button-ripple-opacity: 0.1;
     }
   }
 
-  .mat-button-focus-overlay {
+  .mat-button-base::before {
     background: map_get($foreground, base);
   }
 

src/material/button/button.html

@@ -1,7 +1,6 @@
-<span class="mat-button-wrapper"><ng-content></ng-content></span>
 <div matRipple class="mat-button-ripple"
      [class.mat-button-ripple-round]="isRoundButton || isIconButton"
      [matRippleDisabled]="_isRippleDisabled()"
      [matRippleCentered]="isIconButton"
      [matRippleTrigger]="_getHostElement()"></div>
-<div class="mat-button-focus-overlay"></div>
+<span class="mat-button-wrapper"><ng-content></ng-content></span>

src/material/button/button.scss

@@ -5,7 +5,7 @@
 @import '../../cdk/a11y/a11y';
 
 .mat-button, .mat-icon-button {
-  .mat-button-focus-overlay {
+  &::before {
     opacity: 0;
   }
 }
@@ -14,7 +14,7 @@
 // Use the same visual treatment for hover as for focus.
 .mat-button:hover,
 .mat-stroked-button:hover {
-  .mat-button-focus-overlay {
+  &::before {
     opacity: 0.04;
   }
 }
@@ -25,7 +25,7 @@
 @media (hover: none) {
   .mat-button:hover,
   .mat-stroked-button:hover {
-    .mat-button-focus-overlay {
+    &::before {
       opacity: 0;
     }
   }
@@ -41,26 +41,6 @@
   @include mat-raised-button;
 }
 
-.mat-stroked-button {
-  border: $mat-stroked-button-border-width solid currentColor;
-  padding: $mat-stroked-button-padding;
-  line-height: $mat-stroked-button-line-height;
-
-  // Since the stroked button has has an actual border that reduces the available space for
-  // child elements such as the ripple container or focus overlay, an inherited border radius
-  // for the absolute-positioned child elements does not work properly. This is because the
-  // child element cannot expand to the same boundaries as the parent element with a border.
-  // In order to work around this issue by *not* hiding overflow, we adjust the child elements
-  // to fully cover the actual button element. This means that the border-radius would be correct
-  // then. See: https://github.com/angular/components/issues/13738
-  .mat-button-ripple.mat-ripple, .mat-button-focus-overlay {
-    top: -$mat-stroked-button-border-width;
-    left: -$mat-stroked-button-border-width;
-    right: -$mat-stroked-button-border-width;
-    bottom: -$mat-stroked-button-border-width;
-  }
-}
-
 .mat-fab {
   @include mat-fab($mat-fab-size, $mat-fab-padding);
 }
@@ -91,7 +71,7 @@
 // Increase specificity for the ripple container because ripple styles are part of
 // the `mat-core` mixin and can potentially overwrite the absolute position of the container.
 .mat-button-ripple.mat-ripple,
-.mat-button-focus-overlay {
+.mat-button-base::before {
   @include mat-fill;
 
   // Disable pointer events for the ripple container and focus overlay because the container
@@ -112,10 +92,17 @@
   transform: translateZ(0);
 }
 
+.mat-button-wrapper {
+  // Bump the `z-index` so the focus overlay and ripples go behind the content.
+  z-index: 1;
+  position: relative;
+}
+
 // Element that overlays the button to show focus and hover effects.
-.mat-button-focus-overlay {
+.mat-button-base::before {
   opacity: 0;
   transition: $mat-button-focus-transition;
+  content: '';
 
   ._mat-animation-noopable & {
     transition: none;
@@ -144,6 +131,29 @@
   z-index: 1;
 }
 
+// Note that this needs to be after initial declarations for `.mat-button-ripple` and
+// `.mat-button-base::before` so that we can override the top/left/right/bottom without
+// having to bump the specificity.
+.mat-stroked-button {
+  border: $mat-stroked-button-border-width solid currentColor;
+  padding: $mat-stroked-button-padding;
+  line-height: $mat-stroked-button-line-height;
+
+  // Since the stroked button has has an actual border that reduces the available space for
+  // child elements such as the ripple container or focus overlay, an inherited border radius
+  // for the absolute-positioned child elements does not work properly. This is because the
+  // child element cannot expand to the same boundaries as the parent element with a border.
+  // In order to work around this issue by *not* hiding overflow, we adjust the child elements
+  // to fully cover the actual button element. This means that the border-radius would be correct
+  // then. See: https://github.com/angular/components/issues/13738
+  .mat-button-ripple.mat-ripple, &::before {
+    top: -$mat-stroked-button-border-width;
+    left: -$mat-stroked-button-border-width;
+    right: -$mat-stroked-button-border-width;
+    bottom: -$mat-stroked-button-border-width;
+  }
+}
+
 // Elements inside of all type of buttons should be vertical aligned in the middle.
 .mat-button, .mat-flat-button, .mat-stroked-button, .mat-raised-button, .mat-icon-button,
 .mat-fab, .mat-mini-fab {

src/material/button/button.ts

@@ -94,6 +94,11 @@ export class MatButton extends _MatButtonMixinBase
               @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode: string) {
     super(elementRef);
 
+    // Add a class that applies to all buttons. This makes it easier to target if somebody
+    // wants to target all Material buttons. We do it here rather than `host` to ensure that
+    // the class is applied to derived classes.
+    elementRef.nativeElement.classList.add('mat-button-base');
+
     // For each of the variant selectors that is prevent in the button's host
     // attributes, add the correct corresponding class.
     for (const attr of BUTTON_HOST_ATTRIBUTES) {