diff --git a/packages/mdc-button/README.md b/packages/mdc-button/README.md
index 1c7443e87af..fc0a27735c2 100644
--- a/packages/mdc-button/README.md
+++ b/packages/mdc-button/README.md
@@ -41,6 +41,7 @@ npm install @material/button
 
 ```html
 <button class="mdc-button">
+  <div class="mdc-button__ripple"></div>
   <span class="mdc-button__label">Button</span>
 </button>
 ```
@@ -91,6 +92,7 @@ To add an icon, add an element with the `mdc-button__icon` class inside the butt
 
 ```html
 <button class="mdc-button">
+  <div class="mdc-button__ripple"></div>
   <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
   <span class="mdc-button__label">Button</span>
 </button>
@@ -100,6 +102,7 @@ It's also possible to use an SVG icon:
 
 ```html
 <button class="mdc-button">
+  <div class="mdc-button__ripple"></div>
   <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="...">
   ...
   </svg>
@@ -114,6 +117,7 @@ putting the icon markup _after_ the `mdc-button__label` element.
 
 ```html
 <button class="mdc-button">
+  <div class="mdc-button__ripple"></div>
   <span class="mdc-button__label">Button</span>
   <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
 </button>
@@ -128,6 +132,7 @@ Disabled buttons cannot be interacted with and have no visual interaction effect
 
 ```html
 <button class="mdc-button" disabled>
+  <div class="mdc-button__ripple"></div>
   <span class="mdc-button__label">Button</span>
 </button>
 ```
@@ -139,6 +144,7 @@ Disabled buttons cannot be interacted with and have no visual interaction effect
 CSS Class | Description
 --- | ---
 `mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.
+`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.
 `mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.
 `mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.
 `mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.
diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss
index e67d235eefc..e5434cd2ab5 100644
--- a/packages/mdc-button/_mixins.scss
+++ b/packages/mdc-button/_mixins.scss
@@ -32,6 +32,8 @@
 @import "@material/shape/functions";
 @import "./variables";
 
+$mdc-button-ripple-target: ".mdc-button__ripple";
+
 @mixin mdc-button-core-styles($query: mdc-feature-all()) {
   @include mdc-button-without-ripple($query);
   @include mdc-button-ripple($query);
@@ -120,17 +122,40 @@
 // This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
 // button styles. It is recommended that most users use `mdc-button-core-styles` instead.
 @mixin mdc-button-ripple($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
   @include mdc-ripple-common($query);
 
   .mdc-button {
-    @include mdc-ripple-surface($query);
-    @include mdc-ripple-radius-bounded($query: $query);
-    @include mdc-states(primary, false, $query);
+    @include mdc-ripple-surface($query: $query, $ripple-target: $mdc-button-ripple-target);
+    @include mdc-ripple-radius-bounded(
+      $query: $query, $ripple-target: $mdc-button-ripple-target);
+    @include mdc-states(
+      $color: primary, $query: $query, $ripple-target: $mdc-button-ripple-target);
+
+    #{$mdc-button-ripple-target} {
+      @include mdc-feature-targets($feat-structure) {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+    }
+
+    // Ripple targets inside outlined buttons set their own `top`/`left`,
+    // depending on the border width.
+    &:not(.mdc-button--outlined) #{$mdc-button-ripple-target} {
+      @include mdc-feature-targets($feat-structure) {
+        top: 0;
+        left: 0;
+      }
+    }
   }
 
   .mdc-button--raised,
   .mdc-button--unelevated {
-    @include mdc-states(on-primary, false, $query);
+    @include mdc-states(
+      $color: on-primary, $query: $query, $ripple-target: $mdc-button-ripple-target);
   }
 }
 
@@ -141,10 +166,12 @@
 
   @if ($fill-tone == "dark") {
     @include mdc-button-ink-color(text-primary-on-dark, $query);
-    @include mdc-states(text-primary-on-dark, $query: $query);
+    @include mdc-states(
+      $color: text-primary-on-dark, $query: $query, $ripple-target: $mdc-button-ripple-target);
   } @else {
     @include mdc-button-ink-color(text-primary-on-light, $query);
-    @include mdc-states(text-primary-on-light, $query: $query);
+    @include mdc-states(
+      $color: text-primary-on-light, $query: $query, $ripple-target: $mdc-button-ripple-target);
   }
 }
 
@@ -197,6 +224,14 @@
     $query: $query
   );
 
+  #{$mdc-button-ripple-target} {
+    @include mdc-shape-radius(
+      mdc-shape-resolve-percentage-radius($mdc-button-height, $radius),
+      $rtl-reflexive,
+      $query: $query
+    );
+  }
+
   &.mdc-button--dense {
     @include mdc-shape-radius(
       mdc-shape-resolve-percentage-radius($mdc-dense-button-height, $radius),
@@ -229,6 +264,14 @@
   @include mdc-feature-targets($feat-structure) {
     border-width: $outline-width;
   }
+
+  #{$mdc-button-ripple-target} {
+    @include mdc-feature-targets($feat-structure) {
+      top: -$outline-width;
+      left: -$outline-width;
+      border: $outline-width solid transparent;
+    }
+  }
 }
 
 @mixin mdc-button-base_($query) {
@@ -252,7 +295,6 @@
     line-height: inherit;
     user-select: none;
     -webkit-appearance: none;
-    overflow: hidden;
     vertical-align: middle;
   }
 
diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
index 5356ab1c50f..34514fd96de 100644
--- a/test/screenshot/golden.json
+++ b/test/screenshot/golden.json
@@ -1,82 +1,82 @@
 {
   "spec/mdc-button/classes/baseline-button-with-icons.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/baseline-button-with-icons.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-button-with-icons.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/baseline-button-with-icons.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/baseline-button-with-icons.html.windows_firefox_65.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/baseline-button-with-icons.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-button-with-icons.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-button-with-icons.html.windows_firefox_67.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-button-with-icons.html.windows_ie_11.png"
     }
   },
   "spec/mdc-button/classes/baseline-button-with-trailing-icons.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/baseline-button-with-trailing-icons.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-button-with-trailing-icons.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/baseline-button-with-trailing-icons.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/baseline-button-with-trailing-icons.html.windows_firefox_65.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/baseline-button-with-trailing-icons.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-button-with-trailing-icons.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-button-with-trailing-icons.html.windows_firefox_67.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-button-with-trailing-icons.html.windows_ie_11.png"
     }
   },
   "spec/mdc-button/classes/baseline-button-without-icons.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/baseline-button-without-icons.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-button-without-icons.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/baseline-button-without-icons.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/baseline-button-without-icons.html.windows_firefox_65.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/baseline-button-without-icons.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-button-without-icons.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-button-without-icons.html.windows_firefox_67.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-button-without-icons.html.windows_ie_11.png"
     }
   },
   "spec/mdc-button/classes/baseline-link-with-icons.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/baseline-link-with-icons.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-link-with-icons.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/baseline-link-with-icons.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/baseline-link-with-icons.html.windows_firefox_65.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/baseline-link-with-icons.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-link-with-icons.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-link-with-icons.html.windows_firefox_67.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-link-with-icons.html.windows_ie_11.png"
     }
   },
   "spec/mdc-button/classes/baseline-link-without-icons.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/baseline-link-without-icons.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-link-without-icons.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/baseline-link-without-icons.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/baseline-link-without-icons.html.windows_firefox_65.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/baseline-link-without-icons.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-link-without-icons.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-link-without-icons.html.windows_firefox_67.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-link-without-icons.html.windows_ie_11.png"
     }
   },
   "spec/mdc-button/classes/dense-button-with-icons.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/dense-button-with-icons.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/dense-button-with-icons.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/dense-button-with-icons.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/dense-button-with-icons.html.windows_firefox_65.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/dense-button-with-icons.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/dense-button-with-icons.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/dense-button-with-icons.html.windows_firefox_67.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/dense-button-with-icons.html.windows_ie_11.png"
     }
   },
   "spec/mdc-button/classes/dense-button-with-trailing-icons.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/dense-button-with-trailing-icons.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/dense-button-with-trailing-icons.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/dense-button-with-trailing-icons.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/dense-button-with-trailing-icons.html.windows_firefox_65.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/dense-button-with-trailing-icons.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/dense-button-with-trailing-icons.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/dense-button-with-trailing-icons.html.windows_firefox_67.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/dense-button-with-trailing-icons.html.windows_ie_11.png"
     }
   },
   "spec/mdc-button/classes/dense-button-without-icons.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/dense-button-without-icons.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/dense-button-without-icons.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/dense-button-without-icons.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/dense-button-without-icons.html.windows_firefox_65.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/dense-button-without-icons.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/dense-button-without-icons.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/dense-button-without-icons.html.windows_firefox_67.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/dense-button-without-icons.html.windows_ie_11.png"
     }
   },
   "spec/mdc-button/classes/dense-link-with-icons.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/dense-link-with-icons.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/dense-link-with-icons.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/dense-link-with-icons.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/dense-link-with-icons.html.windows_firefox_65.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/dense-link-with-icons.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/dense-link-with-icons.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/dense-link-with-icons.html.windows_firefox_67.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/dense-link-with-icons.html.windows_ie_11.png"
     }
   },
   "spec/mdc-button/classes/dense-link-without-icons.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/dense-link-without-icons.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/dense-link-without-icons.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/dense-link-without-icons.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/dense-link-without-icons.html.windows_firefox_65.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/dense-link-without-icons.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/dense-link-without-icons.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/dense-link-without-icons.html.windows_firefox_67.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/dense-link-without-icons.html.windows_ie_11.png"
     }
   },
   "spec/mdc-button/mixins/container-fill-color.html": {
@@ -96,19 +96,19 @@
     }
   },
   "spec/mdc-button/mixins/horizontal-padding-baseline.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/mixins/horizontal-padding-baseline.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_09_11_731/spec/mdc-button/mixins/horizontal-padding-baseline.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_firefox_65.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_09_11_731/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_09_11_731/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_firefox_67.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_09_11_731/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_ie_11.png"
     }
   },
   "spec/mdc-button/mixins/horizontal-padding-dense.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/mixins/horizontal-padding-dense.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_09_11_731/spec/mdc-button/mixins/horizontal-padding-dense.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_firefox_65.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_09_11_731/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_09_11_731/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_firefox_67.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_09_11_731/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_ie_11.png"
     }
   },
   "spec/mdc-button/mixins/icon-color.html": {
@@ -128,27 +128,27 @@
     }
   },
   "spec/mdc-button/mixins/shape-radius.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/mixins/shape-radius.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/mixins/shape-radius.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/mixins/shape-radius.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/mixins/shape-radius.html.windows_firefox_65.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/mixins/shape-radius.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/mixins/shape-radius.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/mixins/shape-radius.html.windows_firefox_67.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/mixins/shape-radius.html.windows_ie_11.png"
     }
   },
   "spec/mdc-button/mixins/stroke-color.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/mixins/stroke-color.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/mixins/stroke-color.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/mixins/stroke-color.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/mixins/stroke-color.html.windows_firefox_65.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/mixins/stroke-color.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/mixins/stroke-color.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/mixins/stroke-color.html.windows_firefox_67.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/mixins/stroke-color.html.windows_ie_11.png"
     }
   },
   "spec/mdc-button/mixins/stroke-width.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/mixins/stroke-width.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/mixins/stroke-width.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/mixins/stroke-width.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2019/02/11/21_55_33_374/spec/mdc-button/mixins/stroke-width.html.windows_firefox_65.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/stroke-width.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/mixins/stroke-width.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/mixins/stroke-width.html.windows_firefox_67.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/mixins/stroke-width.html.windows_ie_11.png"
     }
   },
   "spec/mdc-card/classes/baseline.html": {
@@ -408,27 +408,27 @@
     }
   },
   "spec/mdc-dialog/classes/overflow-accessible-font-size.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-dialog/classes/overflow-accessible-font-size.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/11/17_41_29_408/spec/mdc-dialog/classes/overflow-accessible-font-size.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-dialog/classes/overflow-accessible-font-size.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-dialog/classes/overflow-accessible-font-size.html.windows_firefox_65.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/classes/overflow-accessible-font-size.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/11/17_41_29_408/spec/mdc-dialog/classes/overflow-accessible-font-size.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/11/17_41_29_408/spec/mdc-dialog/classes/overflow-accessible-font-size.html.windows_firefox_67.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/11/17_41_29_408/spec/mdc-dialog/classes/overflow-accessible-font-size.html.windows_ie_11.png"
     }
   },
   "spec/mdc-dialog/classes/overflow-bottom.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-dialog/classes/overflow-bottom.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/11/17_41_29_408/spec/mdc-dialog/classes/overflow-bottom.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-dialog/classes/overflow-bottom.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-dialog/classes/overflow-bottom.html.windows_firefox_65.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/classes/overflow-bottom.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/11/17_41_29_408/spec/mdc-dialog/classes/overflow-bottom.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/11/17_41_29_408/spec/mdc-dialog/classes/overflow-bottom.html.windows_firefox_67.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/11/17_41_29_408/spec/mdc-dialog/classes/overflow-bottom.html.windows_ie_11.png"
     }
   },
   "spec/mdc-dialog/classes/overflow-top.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-dialog/classes/overflow-top.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/11/17_41_29_408/spec/mdc-dialog/classes/overflow-top.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-dialog/classes/overflow-top.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-dialog/classes/overflow-top.html.windows_firefox_65.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/classes/overflow-top.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/11/17_41_29_408/spec/mdc-dialog/classes/overflow-top.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/11/17_41_29_408/spec/mdc-dialog/classes/overflow-top.html.windows_firefox_67.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/11/17_41_29_408/spec/mdc-dialog/classes/overflow-top.html.windows_ie_11.png"
     }
   },
   "spec/mdc-dialog/issues/3717.html": {
@@ -456,19 +456,19 @@
     }
   },
   "spec/mdc-dialog/mixins/max-height.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/06/12/17_35_21_026/spec/mdc-dialog/mixins/max-height.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/11/17_41_29_408/spec/mdc-dialog/mixins/max-height.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-dialog/mixins/max-height.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/06/12/17_35_21_026/spec/mdc-dialog/mixins/max-height.html.windows_firefox_67.png",
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/11/17_41_29_408/spec/mdc-dialog/mixins/max-height.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/11/17_41_29_408/spec/mdc-dialog/mixins/max-height.html.windows_firefox_67.png",
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/mixins/max-height.html.windows_ie_11.png"
     }
   },
   "spec/mdc-dialog/mixins/max-width.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-dialog/mixins/max-width.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/11/17_41_29_408/spec/mdc-dialog/mixins/max-width.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-dialog/mixins/max-width.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-dialog/mixins/max-width.html.windows_firefox_65.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/mixins/max-width.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/11/17_41_29_408/spec/mdc-dialog/mixins/max-width.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/11/17_41_29_408/spec/mdc-dialog/mixins/max-width.html.windows_firefox_67.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/11/17_41_29_408/spec/mdc-dialog/mixins/max-width.html.windows_ie_11.png"
     }
   },
   "spec/mdc-dialog/mixins/min-width.html": {
diff --git a/test/screenshot/spec/mdc-button/classes/baseline-button-with-icons.html b/test/screenshot/spec/mdc-button/classes/baseline-button-with-icons.html
index d01b6008aa7..5ecb28983be 100644
--- a/test/screenshot/spec/mdc-button/classes/baseline-button-with-icons.html
+++ b/test/screenshot/spec/mdc-button/classes/baseline-button-with-icons.html
@@ -44,12 +44,14 @@
       <div class="test-layout">
         <div class="test-cell test-cell--button">
           <button class="mdc-button">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -60,12 +62,14 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -76,12 +80,14 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -92,12 +98,14 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -109,6 +117,7 @@
         <!-- Disabled variants intentionally have no mdc-button__label span to verify that leading icon works with or without it -->
         <div class="test-cell test-cell--button">
           <button class="mdc-button" disabled>
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -117,6 +126,7 @@
           </button>
         </div>
         <div class="test-cell test-cell--button">
+          <div class="mdc-button__ripple"></div>
           <button class="mdc-button" disabled>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
@@ -125,6 +135,7 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -134,6 +145,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
@@ -141,6 +153,7 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--unelevated" disabled>
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -150,6 +163,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--unelevated" disabled>
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
@@ -157,6 +171,7 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--outlined" disabled>
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -166,6 +181,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--outlined" disabled>
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
diff --git a/test/screenshot/spec/mdc-button/classes/baseline-button-with-trailing-icons.html b/test/screenshot/spec/mdc-button/classes/baseline-button-with-trailing-icons.html
index 74b97934f8e..618496859c7 100644
--- a/test/screenshot/spec/mdc-button/classes/baseline-button-with-trailing-icons.html
+++ b/test/screenshot/spec/mdc-button/classes/baseline-button-with-trailing-icons.html
@@ -44,12 +44,14 @@
       <div class="test-layout">
         <div class="test-cell test-cell--button">
           <button class="mdc-button">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
@@ -60,12 +62,14 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
@@ -76,12 +80,14 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
@@ -92,12 +98,14 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
@@ -108,6 +116,7 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
@@ -117,6 +126,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
@@ -124,6 +134,7 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
@@ -133,6 +144,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
@@ -140,6 +152,7 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--unelevated" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
@@ -149,6 +162,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--unelevated" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
@@ -156,6 +170,7 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--outlined" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
@@ -165,6 +180,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--outlined" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
diff --git a/test/screenshot/spec/mdc-button/classes/baseline-button-without-icons.html b/test/screenshot/spec/mdc-button/classes/baseline-button-without-icons.html
index 49e36d4015e..84b0890982e 100644
--- a/test/screenshot/spec/mdc-button/classes/baseline-button-without-icons.html
+++ b/test/screenshot/spec/mdc-button/classes/baseline-button-without-icons.html
@@ -43,44 +43,78 @@
     <main class="test-viewport test-viewport--mobile">
       <div class="test-layout">
         <div class="test-cell test-cell--button">
-          <button class="mdc-button"><span class="mdc-button__label">Button</span></button>
+          <button class="mdc-button">
+            <div class="mdc-button__ripple"></div>
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--raised"><span class="mdc-button__label">Button</span></button>
+          <button class="mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--unelevated"><span class="mdc-button__label">Button</span></button>
+          <button class="mdc-button mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--outlined"><span class="mdc-button__label">Button</span></button>
+          <button class="mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
 
         <!-- Short labels to test min-width -->
         <div class="test-cell test-cell--button">
-          <button class="mdc-button"><span class="mdc-button__label">+</span></button>
+          <button class="mdc-button">
+            <span class="mdc-button__label">+</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--raised"><span class="mdc-button__label">+</span></button>
+          <button class="mdc-button mdc-button--raised">
+            <span class="mdc-button__label">+</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--unelevated"><span class="mdc-button__label">+</span></button>
+          <button class="mdc-button mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
+            <span class="mdc-button__label">+</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--outlined"><span class="mdc-button__label">+</span></button>
+          <button class="mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
+            <span class="mdc-button__label">+</span>
+          </button>
         </div>
 
         <!-- Disabled variants intentionally have no mdc-button__label span to verify that leading icon works with or without it -->
         <div class="test-cell test-cell--button">
-          <button class="mdc-button" disabled>Button</button>
+          <button class="mdc-button" disabled>
+            <div class="mdc-button__ripple"></div>
+            Button
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--raised" disabled>Button</button>
+          <button class="mdc-button mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
+            Button
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--unelevated" disabled>Button</button>
+          <button class="mdc-button mdc-button--unelevated" disabled>
+            <div class="mdc-button__ripple"></div>
+            Button
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--outlined" disabled>Button</button>
+          <button class="mdc-button mdc-button--outlined" disabled>
+            <div class="mdc-button__ripple"></div>
+            Button
+          </button>
         </div>
       </div>
     </main>
diff --git a/test/screenshot/spec/mdc-button/classes/baseline-link-with-icons.html b/test/screenshot/spec/mdc-button/classes/baseline-link-with-icons.html
index 8806bed80b8..b14c3051e7b 100644
--- a/test/screenshot/spec/mdc-button/classes/baseline-link-with-icons.html
+++ b/test/screenshot/spec/mdc-button/classes/baseline-link-with-icons.html
@@ -44,12 +44,14 @@
       <div class="test-layout">
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -59,6 +61,7 @@
         </div>
 
         <div class="test-cell test-cell--button">
+          <div class="mdc-button__ripple"></div>
           <a href="#" class="mdc-button mdc-button--raised">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
@@ -66,6 +69,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -76,12 +80,14 @@
 
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -92,12 +98,14 @@
 
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -109,12 +117,14 @@
         <!-- Trailing icons -->
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
@@ -125,12 +135,14 @@
 
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
@@ -141,12 +153,14 @@
 
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
@@ -157,12 +171,14 @@
 
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
diff --git a/test/screenshot/spec/mdc-button/classes/baseline-link-without-icons.html b/test/screenshot/spec/mdc-button/classes/baseline-link-without-icons.html
index 2cad4a24f5a..899f87a1aa5 100644
--- a/test/screenshot/spec/mdc-button/classes/baseline-link-without-icons.html
+++ b/test/screenshot/spec/mdc-button/classes/baseline-link-without-icons.html
@@ -44,21 +44,25 @@
       <div class="test-layout">
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Link</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Link</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Link</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Link</span>
           </a>
         </div>
@@ -66,21 +70,25 @@
         <!-- Short labels to test min-width -->
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">+</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">+</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">+</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">+</span>
           </a>
         </div>
diff --git a/test/screenshot/spec/mdc-button/classes/dense-button-with-icons.html b/test/screenshot/spec/mdc-button/classes/dense-button-with-icons.html
index 7e54173d9a0..fdf4ae55fcf 100644
--- a/test/screenshot/spec/mdc-button/classes/dense-button-with-icons.html
+++ b/test/screenshot/spec/mdc-button/classes/dense-button-with-icons.html
@@ -44,12 +44,14 @@
       <div class="test-layout">
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="#000000">
@@ -62,12 +64,14 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="#000000">
@@ -80,12 +84,14 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="#000000">
@@ -98,12 +104,14 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="#000000">
@@ -117,6 +125,7 @@
         <!-- Disabled variants intentionally have no mdc-button__label span to verify that leading icon works with or without it -->
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense" disabled>
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="#000000">
@@ -128,6 +137,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense" disabled>
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
@@ -135,6 +145,7 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="#000000">
@@ -146,6 +157,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
@@ -153,6 +165,7 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--unelevated" disabled>
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="#000000">
@@ -164,6 +177,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--unelevated" disabled>
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
@@ -171,6 +185,7 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--outlined" disabled>
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="#000000">
@@ -182,6 +197,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--outlined" disabled>
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
diff --git a/test/screenshot/spec/mdc-button/classes/dense-button-with-trailing-icons.html b/test/screenshot/spec/mdc-button/classes/dense-button-with-trailing-icons.html
index ed9c203ecd7..92505d7addb 100644
--- a/test/screenshot/spec/mdc-button/classes/dense-button-with-trailing-icons.html
+++ b/test/screenshot/spec/mdc-button/classes/dense-button-with-trailing-icons.html
@@ -44,12 +44,14 @@
       <div class="test-layout">
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
@@ -62,12 +64,14 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
@@ -80,12 +84,14 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
@@ -98,12 +104,14 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
@@ -116,6 +124,7 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
@@ -127,6 +136,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
@@ -134,6 +144,7 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
@@ -145,6 +156,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
@@ -152,6 +164,7 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--unelevated" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
@@ -163,6 +176,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--unelevated" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
@@ -170,6 +184,7 @@
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--outlined" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
@@ -181,6 +196,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--outlined" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
diff --git a/test/screenshot/spec/mdc-button/classes/dense-button-without-icons.html b/test/screenshot/spec/mdc-button/classes/dense-button-without-icons.html
index 626ffa3cd7b..7a2b3a4e253 100644
--- a/test/screenshot/spec/mdc-button/classes/dense-button-without-icons.html
+++ b/test/screenshot/spec/mdc-button/classes/dense-button-without-icons.html
@@ -44,21 +44,25 @@
       <div class="test-layout">
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
@@ -66,37 +70,53 @@
         <!-- Short labels to test min-width -->
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">+</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">+</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">+</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">+</span>
           </button>
         </div>
 
         <!-- Disabled variants intentionally have no mdc-button__label span to verify that leading icon works with or without it -->
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--dense" disabled>Button</button>
+          <button class="mdc-button mdc-button--dense" disabled>
+            <div class="mdc-button__ripple"></div>
+            Button
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--dense mdc-button--raised" disabled>Button</button>
+          <button class="mdc-button mdc-button--dense mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
+            Button
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--dense mdc-button--unelevated" disabled>Button</button>
+          <button class="mdc-button mdc-button--dense mdc-button--unelevated" disabled>
+            <div class="mdc-button__ripple"></div>
+            Button
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--dense mdc-button--outlined" disabled>Button</button>
+          <button class="mdc-button mdc-button--dense mdc-button--outlined" disabled>
+            <div class="mdc-button__ripple"></div>
+            Button
+          </button>
         </div>
       </div>
     </main>
diff --git a/test/screenshot/spec/mdc-button/classes/dense-link-with-icons.html b/test/screenshot/spec/mdc-button/classes/dense-link-with-icons.html
index 9b1bd789a39..3bc1494df62 100644
--- a/test/screenshot/spec/mdc-button/classes/dense-link-with-icons.html
+++ b/test/screenshot/spec/mdc-button/classes/dense-link-with-icons.html
@@ -44,12 +44,14 @@
       <div class="test-layout">
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="#000000">
@@ -62,12 +64,14 @@
 
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="#000000">
@@ -80,12 +84,14 @@
 
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="#000000">
@@ -98,12 +104,14 @@
 
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="#000000">
@@ -117,12 +125,14 @@
         <!-- Trailing icons -->
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
@@ -135,12 +145,14 @@
 
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
@@ -153,12 +165,14 @@
 
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
@@ -171,12 +185,14 @@
 
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
diff --git a/test/screenshot/spec/mdc-button/classes/dense-link-without-icons.html b/test/screenshot/spec/mdc-button/classes/dense-link-without-icons.html
index 8e383c8b473..d1ec12c822f 100644
--- a/test/screenshot/spec/mdc-button/classes/dense-link-without-icons.html
+++ b/test/screenshot/spec/mdc-button/classes/dense-link-without-icons.html
@@ -44,21 +44,25 @@
       <div class="test-layout">
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </a>
         </div>
@@ -66,21 +70,25 @@
         <!-- Short labels to test min-width -->
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">+</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">+</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">+</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">+</span>
           </a>
         </div>
diff --git a/test/screenshot/spec/mdc-button/mixins/container-fill-color.html b/test/screenshot/spec/mdc-button/mixins/container-fill-color.html
index ea7ab9ba83f..73b7640f1cd 100644
--- a/test/screenshot/spec/mdc-button/mixins/container-fill-color.html
+++ b/test/screenshot/spec/mdc-button/mixins/container-fill-color.html
@@ -44,16 +44,19 @@
       <div class="test-layout">
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--container-fill-color mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <a class="custom-button custom-button--container-fill-color mdc-button mdc-button--raised" href="#">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Link</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--container-fill-color mdc-button mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Disabled</span>
           </button>
         </div>
diff --git a/test/screenshot/spec/mdc-button/mixins/filled-accessible.html b/test/screenshot/spec/mdc-button/mixins/filled-accessible.html
index a833917c3d7..407f91ce2a9 100644
--- a/test/screenshot/spec/mdc-button/mixins/filled-accessible.html
+++ b/test/screenshot/spec/mdc-button/mixins/filled-accessible.html
@@ -44,22 +44,26 @@
       <div class="test-layout">
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--filled-accessible mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <a class="custom-button custom-button--filled-accessible mdc-button mdc-button--raised" href="#">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Link</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--filled-accessible mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--filled-accessible mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -69,6 +73,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--filled-accessible mdc-button mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -78,6 +83,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--filled-accessible mdc-button mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
diff --git a/test/screenshot/spec/mdc-button/mixins/horizontal-padding-baseline.html b/test/screenshot/spec/mdc-button/mixins/horizontal-padding-baseline.html
index a5a325a4119..e53c396fbd9 100644
--- a/test/screenshot/spec/mdc-button/mixins/horizontal-padding-baseline.html
+++ b/test/screenshot/spec/mdc-button/mixins/horizontal-padding-baseline.html
@@ -44,45 +44,53 @@
       <div class="test-layout">
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
 
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
@@ -91,45 +99,53 @@
         <!-- Short labels to test min-width -->
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">+</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">+</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">+</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">+</span>
           </button>
         </div>
 
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button" disabled>
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Disabled</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Disabled</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--unelevated" disabled>
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Disabled</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--outlined" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Disabled</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
diff --git a/test/screenshot/spec/mdc-button/mixins/horizontal-padding-dense.html b/test/screenshot/spec/mdc-button/mixins/horizontal-padding-dense.html
index 74ca14a9c35..dc75c0a6e9e 100644
--- a/test/screenshot/spec/mdc-button/mixins/horizontal-padding-dense.html
+++ b/test/screenshot/spec/mdc-button/mixins/horizontal-padding-dense.html
@@ -44,45 +44,53 @@
       <div class="test-layout">
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
 
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
@@ -91,45 +99,53 @@
         <!-- Short labels to test min-width -->
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">+</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">+</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">+</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">+</span>
           </button>
         </div>
 
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense" disabled>
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Disabled</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Disabled</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--unelevated" disabled>
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Disabled</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--outlined" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Disabled</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
diff --git a/test/screenshot/spec/mdc-button/mixins/icon-color.html b/test/screenshot/spec/mdc-button/mixins/icon-color.html
index 16e8ad84981..2d648dfdec8 100644
--- a/test/screenshot/spec/mdc-button/mixins/icon-color.html
+++ b/test/screenshot/spec/mdc-button/mixins/icon-color.html
@@ -44,12 +44,14 @@
       <div class="test-layout">
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--icon-color mdc-button">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--icon-color mdc-button">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -59,6 +61,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--icon-color mdc-button" disabled>
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -68,18 +71,21 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--icon-color mdc-button" disabled>
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--icon-color mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--icon-color mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -89,6 +95,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--icon-color mdc-button mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -98,6 +105,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--icon-color mdc-button mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
@@ -106,12 +114,14 @@
         <!-- Trailing icon -->
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--icon-color mdc-button">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--icon-color mdc-button">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
@@ -121,6 +131,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--icon-color mdc-button" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
@@ -130,18 +141,21 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--icon-color mdc-button" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--icon-color mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--icon-color mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
@@ -151,6 +165,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--icon-color mdc-button mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
@@ -160,6 +175,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--icon-color mdc-button mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
diff --git a/test/screenshot/spec/mdc-button/mixins/ink-color.html b/test/screenshot/spec/mdc-button/mixins/ink-color.html
index 8cefde9d9eb..687a49b7339 100644
--- a/test/screenshot/spec/mdc-button/mixins/ink-color.html
+++ b/test/screenshot/spec/mdc-button/mixins/ink-color.html
@@ -44,22 +44,26 @@
       <div class="test-layout">
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--ink-color mdc-button">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <a class="custom-button custom-button--ink-color mdc-button" href="#">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Link</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--ink-color mdc-button">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--ink-color mdc-button">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -69,12 +73,14 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--ink-color mdc-button" disabled>
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--ink-color mdc-button" disabled>
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -84,22 +90,26 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--ink-color mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <a class="custom-button custom-button--ink-color mdc-button mdc-button--raised" href="#">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Link</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--ink-color mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--ink-color mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -109,12 +119,14 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--ink-color mdc-button mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--ink-color mdc-button mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
diff --git a/test/screenshot/spec/mdc-button/mixins/shape-radius.html b/test/screenshot/spec/mdc-button/mixins/shape-radius.html
index e813630c6ee..9e1107344eb 100644
--- a/test/screenshot/spec/mdc-button/mixins/shape-radius.html
+++ b/test/screenshot/spec/mdc-button/mixins/shape-radius.html
@@ -44,41 +44,49 @@
       <div class="test-layout">
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--shape-radius mdc-button">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--shape-radius mdc-button" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Disabled</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--shape-radius mdc-button mdc-button--raised">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--shape-radius mdc-button mdc-button--raised" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Disabled</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--shape-radius mdc-button mdc-button--unelevated">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--shape-radius mdc-button mdc-button--unelevated" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Disabled</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--shape-radius mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--shape-radius mdc-button mdc-button--outlined" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Disabled</span>
           </button>
         </div>
diff --git a/test/screenshot/spec/mdc-button/mixins/stroke-color.html b/test/screenshot/spec/mdc-button/mixins/stroke-color.html
index 3a615ca7efc..b637729ea68 100644
--- a/test/screenshot/spec/mdc-button/mixins/stroke-color.html
+++ b/test/screenshot/spec/mdc-button/mixins/stroke-color.html
@@ -44,16 +44,19 @@
       <div class="test-layout">
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-color mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <a class="custom-button custom-button--outline-color mdc-button mdc-button--outlined" href="#">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Link</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-color mdc-button mdc-button--outlined" disabled>
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Disabled</span>
           </button>
         </div>
diff --git a/test/screenshot/spec/mdc-button/mixins/stroke-width.html b/test/screenshot/spec/mdc-button/mixins/stroke-width.html
index 99f9a83d3be..a81c19bc269 100644
--- a/test/screenshot/spec/mdc-button/mixins/stroke-width.html
+++ b/test/screenshot/spec/mdc-button/mixins/stroke-width.html
@@ -44,22 +44,26 @@
       <div class="test-layout">
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <a class="custom-button custom-button--outline-width mdc-button mdc-button--outlined" href="#">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Link</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -69,12 +73,14 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
@@ -84,6 +90,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined" disabled>
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -93,28 +100,33 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined" disabled>
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined mdc-button--dense">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Button</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <a class="custom-button custom-button--outline-width mdc-button mdc-button--outlined mdc-button--dense" href="#">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Link</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined mdc-button--dense">
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined mdc-button--dense">
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -124,12 +136,14 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined mdc-button--dense">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined mdc-button--dense">
+            <div class="mdc-button__ripple"></div>
             <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
@@ -139,6 +153,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined mdc-button--dense" disabled>
+            <div class="mdc-button__ripple"></div>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
@@ -148,6 +163,7 @@
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined mdc-button--dense" disabled>
+            <div class="mdc-button__ripple"></div>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             <span class="mdc-button__label">Font Icon</span>
           </button>
diff --git a/test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html b/test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html
index 5ba8b58e71a..149aaa37ab3 100644
--- a/test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html
+++ b/test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html
@@ -107,9 +107,11 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
                 </div>
                 <footer class="mdc-dialog__actions">
                   <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
+                    <div class="mdc-button__ripple"></div>
                     <span class="mdc-button__label test-font--redact-all">Cancel</span>
                   </button>
                   <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
+                    <div class="mdc-button__ripple"></div>
                     <span class="mdc-button__label test-font--redact-all">Discard</span>
                   </button>
                 </footer>
diff --git a/test/screenshot/spec/mdc-dialog/classes/baseline-alert-with-title.html b/test/screenshot/spec/mdc-dialog/classes/baseline-alert-with-title.html
index 352f27471ce..517e72d084d 100644
--- a/test/screenshot/spec/mdc-dialog/classes/baseline-alert-with-title.html
+++ b/test/screenshot/spec/mdc-dialog/classes/baseline-alert-with-title.html
@@ -56,9 +56,11 @@ <h2 class="mdc-dialog__title test-dialog__title" id="test-dialog__title"><!--
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Discard</span>
               </button>
             </footer>
diff --git a/test/screenshot/spec/mdc-dialog/classes/baseline-alert.html b/test/screenshot/spec/mdc-dialog/classes/baseline-alert.html
index cd609fe1b6f..21d4be4a413 100644
--- a/test/screenshot/spec/mdc-dialog/classes/baseline-alert.html
+++ b/test/screenshot/spec/mdc-dialog/classes/baseline-alert.html
@@ -52,9 +52,11 @@
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Discard</span>
               </button>
             </footer>
diff --git a/test/screenshot/spec/mdc-dialog/classes/baseline-confirmation.html b/test/screenshot/spec/mdc-dialog/classes/baseline-confirmation.html
index 05badd41138..843a3a95777 100644
--- a/test/screenshot/spec/mdc-dialog/classes/baseline-confirmation.html
+++ b/test/screenshot/spec/mdc-dialog/classes/baseline-confirmation.html
@@ -96,9 +96,11 @@ <h2 class="mdc-dialog__title test-dialog__title" id="test-dialog__title">Confirm
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes" data-mdc-dialog-button-default>
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
diff --git a/test/screenshot/spec/mdc-dialog/classes/manual-window-resize.html b/test/screenshot/spec/mdc-dialog/classes/manual-window-resize.html
index d4048dec655..a2be855694a 100644
--- a/test/screenshot/spec/mdc-dialog/classes/manual-window-resize.html
+++ b/test/screenshot/spec/mdc-dialog/classes/manual-window-resize.html
@@ -71,12 +71,15 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Verbose loquacious button text</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
diff --git a/test/screenshot/spec/mdc-dialog/classes/overflow-accessible-font-size.html b/test/screenshot/spec/mdc-dialog/classes/overflow-accessible-font-size.html
index d4a46a00008..e57bd182947 100644
--- a/test/screenshot/spec/mdc-dialog/classes/overflow-accessible-font-size.html
+++ b/test/screenshot/spec/mdc-dialog/classes/overflow-accessible-font-size.html
@@ -276,14 +276,17 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">
                   This is a really long button for testing purposes only. Button text should be short when at all possible, but l10n can present a challenge.
                 </span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
diff --git a/test/screenshot/spec/mdc-dialog/classes/overflow-bottom.html b/test/screenshot/spec/mdc-dialog/classes/overflow-bottom.html
index d1e7a2a0521..00e210fe77c 100644
--- a/test/screenshot/spec/mdc-dialog/classes/overflow-bottom.html
+++ b/test/screenshot/spec/mdc-dialog/classes/overflow-bottom.html
@@ -276,14 +276,17 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">
                   This is a really long button for testing purposes only. Button text should be short when at all possible, but l10n can present a challenge.
                 </span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
diff --git a/test/screenshot/spec/mdc-dialog/classes/overflow-top.html b/test/screenshot/spec/mdc-dialog/classes/overflow-top.html
index 9489c2d8c9c..a85feb15ffd 100644
--- a/test/screenshot/spec/mdc-dialog/classes/overflow-top.html
+++ b/test/screenshot/spec/mdc-dialog/classes/overflow-top.html
@@ -276,14 +276,17 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">
                   This is a really long button for testing purposes only. Button text should be short when at all possible, but l10n can present a challenge.
                 </span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
diff --git a/test/screenshot/spec/mdc-dialog/issues/3717.html b/test/screenshot/spec/mdc-dialog/issues/3717.html
index 52ba2272afb..c729185fb2a 100644
--- a/test/screenshot/spec/mdc-dialog/issues/3717.html
+++ b/test/screenshot/spec/mdc-dialog/issues/3717.html
@@ -75,9 +75,11 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/container-fill-color.html b/test/screenshot/spec/mdc-dialog/mixins/container-fill-color.html
index df276976e41..1ec7bca7689 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/container-fill-color.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/container-fill-color.html
@@ -71,12 +71,15 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Verbose loquacious button text</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/content-ink-color.html b/test/screenshot/spec/mdc-dialog/mixins/content-ink-color.html
index 3d09efff43f..913007ba7ab 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/content-ink-color.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/content-ink-color.html
@@ -71,12 +71,15 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Verbose loquacious button text</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/max-height.html b/test/screenshot/spec/mdc-dialog/mixins/max-height.html
index 54830c28b57..b29871aa492 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/max-height.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/max-height.html
@@ -276,14 +276,17 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">
                   This is a really long button for testing purposes only. Button text should be short when at all possible, but l10n can present a challenge.
                 </span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/max-width.html b/test/screenshot/spec/mdc-dialog/mixins/max-width.html
index 347707e739a..5f88712f911 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/max-width.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/max-width.html
@@ -276,14 +276,17 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--5-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">
                   This is a really long button for testing purposes only. Button text should be short when at all possible, but l10n can present a challenge.
                 </span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/min-width.html b/test/screenshot/spec/mdc-dialog/mixins/min-width.html
index 104eb5cf706..472447dd247 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/min-width.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/min-width.html
@@ -56,6 +56,7 @@ <h2 class="mdc-dialog__title test-dialog__title" id="test-dialog__title">Title</
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/scrim-color.html b/test/screenshot/spec/mdc-dialog/mixins/scrim-color.html
index b7615161822..2e2b1e2cd65 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/scrim-color.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/scrim-color.html
@@ -71,12 +71,15 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Verbose loquacious button text</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/scroll-divider-color.html b/test/screenshot/spec/mdc-dialog/mixins/scroll-divider-color.html
index 76ad1d56c2d..ae883fc1b85 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/scroll-divider-color.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/scroll-divider-color.html
@@ -276,12 +276,15 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Verbose loquacious button text</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/shape-radius.html b/test/screenshot/spec/mdc-dialog/mixins/shape-radius.html
index 5838f2df731..3c7ee76be44 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/shape-radius.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/shape-radius.html
@@ -71,12 +71,15 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Verbose loquacious button text</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/title-ink-color.html b/test/screenshot/spec/mdc-dialog/mixins/title-ink-color.html
index 645581c9cd3..3fc53695aa6 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/title-ink-color.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/title-ink-color.html
@@ -71,12 +71,15 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Verbose loquacious button text</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
+                <div class="mdc-button__ripple"></div>
                 <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>