diff --git a/demos/button.html b/demos/button.html
index 93ee339bb5b..69e4082da6d 100644
--- a/demos/button.html
+++ b/demos/button.html
@@ -74,6 +74,42 @@ <h1>MDC WEB BUTTON</h1>
             Div
           </div>
         </fieldset>
+        <fieldset>
+          <legend>Buttons - CSS Only</legend>
+          <button class="mdc-button" data-demo-no-js>
+            Default
+          </button>
+          <button class="mdc-button mdc-button--raised" data-demo-no-js>
+            Raised
+          </button>
+          <button class="mdc-button mdc-button--dense" data-demo-no-js>
+            Dense Default
+          </button>
+          <button class="mdc-button mdc-button--raised mdc-button--dense" data-demo-no-js>
+            Dense Raised
+          </button>
+          <button class="mdc-button mdc-button--compact" data-demo-no-js>
+            Compact
+          </button>
+          <button class="mdc-button mdc-button--raised mdc-button--compact" data-demo-no-js>
+            Compact Raised
+          </button>
+          <button class="mdc-button mdc-button--primary" data-demo-no-js>
+            Default with Primary
+          </button>
+          <button class="mdc-button mdc-button--raised mdc-button--primary" data-demo-no-js>
+            Raised with Primary
+          </button>
+          <button class="mdc-button mdc-button--accent" data-demo-no-js>
+            Default with Accent
+          </button>
+          <button class="mdc-button mdc-button--raised mdc-button--accent" data-demo-no-js>
+            Raised with Accent
+          </button>
+          <div class="mdc-button mdc-button--raised" tabindex="0" role="button" data-demo-no-js>
+            Div
+          </div>
+        </fieldset>
         <fieldset>
           <legend>Links with Button Style</legend>
           <a href="/button.html" class="mdc-button">
@@ -183,6 +219,42 @@ <h2>Dark theme</h2>
             Div
           </div>
         </fieldset>
+        <fieldset>
+          <legend>Buttons - CSS Only</legend>
+          <button class="mdc-button" data-demo-no-js>
+            Default
+          </button>
+          <button class="mdc-button mdc-button--raised" data-demo-no-js>
+            Raised
+          </button>
+          <button class="mdc-button mdc-button--dense" data-demo-no-js>
+            Dense Default
+          </button>
+          <button class="mdc-button mdc-button--raised mdc-button--dense" data-demo-no-js>
+            Dense Raised
+          </button>
+          <button class="mdc-button mdc-button--compact" data-demo-no-js>
+            Compact
+          </button>
+          <button class="mdc-button mdc-button--raised mdc-button--compact" data-demo-no-js>
+            Compact Raised
+          </button>
+          <button class="mdc-button mdc-button--primary" data-demo-no-js>
+            Default with Primary
+          </button>
+          <button class="mdc-button mdc-button--raised mdc-button--primary" data-demo-no-js>
+            Raised with Primary
+          </button>
+          <button class="mdc-button mdc-button--accent" data-demo-no-js>
+            Default with Accent
+          </button>
+          <button class="mdc-button mdc-button--raised mdc-button--accent" data-demo-no-js>
+            Raised with Accent
+          </button>
+          <div class="mdc-button mdc-button--raised" tabindex="0" role="button" data-demo-no-js>
+            Div
+          </div>
+        </fieldset>
         <fieldset disabled>
           <legend>Disabled Buttons</legend>
           <button class="mdc-button">
@@ -236,7 +308,7 @@ <h2>Dark theme</h2>
           }
         }, 250);
         function init() {
-          var btns = document.querySelectorAll('.mdc-button');
+          var btns = document.querySelectorAll('.mdc-button:not([data-demo-no-js]');
           for (var i = 0, btn; btn = btns[i]; i++) {
             mdc.ripple.MDCRipple.attachTo(btn);
           }
diff --git a/demos/checkbox.html b/demos/checkbox.html
index 581c2a9d973..90a2512bd1b 100644
--- a/demos/checkbox.html
+++ b/demos/checkbox.html
@@ -57,7 +57,7 @@
     <main>
       <h1>MDC Checkbox</h1>
       <section>
-        <h2>Basic Example, no Javascript</h2>
+        <h2>CSS Only</h2>
         <div class="mdc-form-field">
           <div class="mdc-checkbox">
             <input type="checkbox"
diff --git a/demos/fab.html b/demos/fab.html
index 5a1f01cdda4..6d9361989d1 100644
--- a/demos/fab.html
+++ b/demos/fab.html
@@ -78,6 +78,29 @@ <h1>MDC FAB</h1>
             </span>
           </button>
         </fieldset>
+        <fieldset>
+          <legend>CSS Only FABs</legend>
+          <button class="mdc-fab material-icons" aria-label="Favorite" data-demo-no-js>
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
+          </button>
+          <button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite" data-demo-no-js>
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
+          </button>
+          <button class="mdc-fab mdc-fab--plain material-icons" aria-label="Favorite" data-demo-no-js>
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
+          </button>
+          <button class="mdc-fab mdc-fab--mini mdc-fab--plain material-icons" aria-label="Favorite" data-demo-no-js>
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
+          </button>
+        </fieldset>
         <fieldset disabled>
           <legend>Disabled FABs</legend>
           <button class="mdc-fab material-icons" aria-label="Favorite">
@@ -118,7 +141,7 @@ <h1>MDC FAB</h1>
           }
         }, 250);
         function init() {
-          var fabs = document.querySelectorAll('.mdc-fab');
+          var fabs = document.querySelectorAll('.mdc-fab:not([data-demo-no-js])');
           for (var i = 0, fab; fab = fabs[i]; i++) {
             mdc.ripple.MDCRipple.attachTo(fab);
           }
diff --git a/demos/radio.html b/demos/radio.html
index e8d26293bbe..ab087dc6432 100644
--- a/demos/radio.html
+++ b/demos/radio.html
@@ -46,8 +46,7 @@
     <main>
       <h1>MDC Radio</h1>
       <section>
-        <h2>Basic Example, No Javascript</h2>
-
+        <h2>CSS Only</h2>
         <div class="mdc-form-field">
           <div class="mdc-radio" data-demo-no-js>
             <input class="mdc-radio__native-control" type="radio" id="ex1-radio1" checked name="ex1">
diff --git a/demos/ripple.html b/demos/ripple.html
index d575f794369..b943765962e 100644
--- a/demos/ripple.html
+++ b/demos/ripple.html
@@ -47,6 +47,14 @@
         border-radius: 50%;
       }
 
+      .mdc-ripple-surface[data-mdc-ripple-is-unbounded][data-demo-no-js]::before,
+      .mdc-ripple-surface[data-mdc-ripple-is-unbounded][data-demo-no-js]::after {
+        height: 100%;
+        left: 0;
+        top: 0;
+        width: 100%;
+      }
+
       button.demo-surface {
         display: inline-block; /* Safari does not center button text otherwise :( */
         background: none;
@@ -57,7 +65,14 @@
       }
 
       section {
-        margin: 48px;
+        align-items: center;
+        display: flex;
+        margin-left: 10px;
+      }
+
+      section > div {
+        margin: 48px 0;
+        width: 400px;
       }
 
       body {
@@ -82,6 +97,13 @@
         user-select: none;
         -webkit-user-select: none;
       }
+
+      @media (max-width: 565px) {
+        section {
+          flex-direction: column;
+          width: 100%;
+        }
+      }
     </style>
   </head>
   <body>
@@ -92,40 +114,80 @@
     <main>
       <h1>MDC Ripple</h1>
       <section>
-        <h2>Bounded</h2>
-        <div class="mdc-ripple-surface demo-surface mdc-elevation--z2" tabindex="0">
-          Interact with me!
+        <div>
+          <h2>Bounded</h2>
+          <div class="mdc-ripple-surface demo-surface mdc-elevation--z2" tabindex="0">
+            Interact with me!
+          </div>
+        </div>
+        <div>
+          <h2>Bounded - CSS Only</h2>
+          <div class="mdc-ripple-surface demo-surface mdc-elevation--z2" data-demo-no-js tabindex="0">
+            Interact with me!
+          </div>
         </div>
       </section>
       <section>
-        <h2>Unbounded</h2>
-        <div class="mdc-ripple-surface demo-surface material-icons" data-mdc-ripple-is-unbounded
-             aria-label="Favorite" tabindex="0">
-          favorite
+        <div>
+          <h2>Unbounded</h2>
+          <div class="mdc-ripple-surface demo-surface material-icons" data-mdc-ripple-is-unbounded
+               aria-label="Favorite" tabindex="0">
+            favorite
+          </div>
+        </div>
+        <div>
+          <h2>Unbounded - CSS Only</h2>
+          <div class="mdc-ripple-surface demo-surface material-icons" data-mdc-ripple-is-unbounded
+               aria-label="Favorite" data-demo-no-js tabindex="0">
+            favorite
+          </div>
         </div>
       </section>
       <section>
-        <h2>Theme Styles</h2>
-        <div
-          class="mdc-ripple-surface mdc-ripple-surface--primary
-                 mdc-theme--primary demo-surface mdc-elevation--z2" tabindex="0">
-          Primary
+        <div>
+          <h2>Theme Styles</h2>
+          <div
+            class="mdc-ripple-surface mdc-ripple-surface--primary
+                   mdc-theme--primary demo-surface mdc-elevation--z2" tabindex="0">
+            Primary
+          </div>
+          <div
+            class="mdc-ripple-surface mdc-ripple-surface--accent
+                   mdc-theme--accent demo-surface mdc-elevation--z2" tabindex="0">
+            Accent
+          </div>
         </div>
-        <div
-          class="mdc-ripple-surface mdc-ripple-surface--accent
-                 mdc-theme--accent demo-surface mdc-elevation--z2" tabindex="0">
-          Accent
+        <div>
+          <h2>Theme Styles - CSS Only</h2>
+          <div
+            class="mdc-ripple-surface mdc-ripple-surface--primary
+                   mdc-theme--primary demo-surface mdc-elevation--z2" data-demo-no-js tabindex="0">
+            Primary
+          </div>
+          <div
+            class="mdc-ripple-surface mdc-ripple-surface--accent
+                   mdc-theme--accent demo-surface mdc-elevation--z2" data-demo-no-js tabindex="0">
+            Accent
+          </div>
         </div>
+
       </section>
       <section>
-        <h2>Applied to <code>&lt;button&gt; element</h2>
+        <div>
+          <h2>Applied to <code>&lt;button&gt; element</h2>
           <button type="button" class="mdc-ripple-surface mdc-elevation--z2 demo-surface">button</button>
+        </div>
+        <div>
+          <h2>Applied to <code>&lt;button&gt; element - CSS Only</h2>
+          <button type="button" class="mdc-ripple-surface mdc-elevation--z2 demo-surface" data-demo-no-js>button</button>
+        </div>
+
       </section>
     </main>
     <script src="assets/material-components-web.js" charset="utf-8"></script>
     <script>
       (function(global) {
-        [].forEach.call(document.querySelectorAll('.mdc-ripple-surface'), function(surface) {
+        [].forEach.call(document.querySelectorAll('.mdc-ripple-surface:not([data-demo-no-js]'), function(surface) {
           mdc.ripple.MDCRipple.attachTo(surface);
         });
       })(this);
diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss
index 29e99c5126a..d26f4e97833 100644
--- a/packages/mdc-button/mdc-button.scss
+++ b/packages/mdc-button/mdc-button.scss
@@ -22,7 +22,11 @@
 @import "@material/typography/mixins";
 
 // postcss-bem-linter: define button
+
 .mdc-button {
+  @include mdc-ripple-base;
+  @include mdc-ripple-bg((pseudo: "::before"));
+  @include mdc-ripple-fg((pseudo: "::after"));
   @include mdc-typography(body2);
   @include mdc-theme-prop(color, text-primary-on-light);
 
@@ -41,6 +45,7 @@
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
+  overflow: hidden;
   vertical-align: middle;
   user-select: none;
   box-sizing: border-box;
@@ -48,43 +53,23 @@
   -webkit-tap-highlight-color: rgba(black, .18);
 
   @include mdc-theme-dark {
+    @include mdc-ripple-base;
+    @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .14));
+    @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .14));
     @include mdc-theme-prop(color, text-primary-on-dark);
 
     -webkit-tap-highlight-color: rgba(white, .18);
   }
 
-  // postcss-bem-linter: ignore
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    transition: mdc-animation-exit(opacity, 120ms);
-    border-radius: inherit;
-    background: currentColor;
-    content: "";
-    opacity: 0;
-  }
-
-  &:focus::before {
-    transition: mdc-animation-enter(opacity, 120ms);
-    opacity: .12;
-  }
-
-  &:active::before {
-    transition: mdc-animation-enter(opacity, 120ms);
-
-    // Slightly darker value for visual distinction.
-    // This allows a full base that has distinct modes.
-    // Progressive enhancement with ripples will provide complete button spec alignment.
-    opacity: .18;
-  }
-
-  &:focus:active::before {
-    transition-timing-function: $mdc-animation-fast-out-slow-in-timing-function;
+  @each $theme-style in (primary, accent) {
+    &.mdc-button--#{$theme-style} {
+      @include mdc-ripple-base;
+      @include mdc-ripple-bg((pseudo: "::before", theme-style: $theme-style, opacity: .12));
+      @include mdc-ripple-fg((pseudo: "::after", theme-style: $theme-style, opacity: .12));
+    }
   }
 
+  // postcss-bem-linter: ignore
   &:active {
     outline: none;
   }
@@ -104,6 +89,7 @@
     line-height: 32px;
   }
 
+  // TODO(cristobalchao): Disable ink wash on hover and alter elevation instead for raised surfaces.
   &--raised {
     @include mdc-elevation(2);
     @include mdc-elevation-transition;
@@ -114,6 +100,14 @@
       @include mdc-elevation(8);
     }
 
+    @each $theme-style in (primary, accent) {
+      &.mdc-button--#{$theme-style} {
+        @include mdc-ripple-base;
+        @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .14));
+        @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .14));
+      }
+    }
+
     @include mdc-theme-dark(".mdc-button") {
       @include mdc-theme-prop(background-color, primary);
 
@@ -196,31 +190,3 @@
 
 // postcss-bem-linter: end
 
-.mdc-button.mdc-ripple-upgraded {
-  @include mdc-ripple-base;
-  @include mdc-ripple-bg((pseudo: "::before"));
-  @include mdc-ripple-fg((pseudo: "::after"));
-
-  overflow: hidden;
-
-  @include mdc-theme-dark(".mdc-button", true) {
-    @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .14));
-    @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .14));
-  }
-
-  @each $theme-style in (primary, accent) {
-    &.mdc-button--#{$theme-style} {
-      @include mdc-ripple-bg((pseudo: "::before", theme-style: $theme-style, opacity: .12));
-      @include mdc-ripple-fg((pseudo: "::after", theme-style: $theme-style, opacity: .12));
-    }
-  }
-}
-
-.mdc-button--raised.mdc-ripple-upgraded {
-  @each $theme-style in (primary, accent) {
-    &.mdc-button--#{$theme-style} {
-      @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .14));
-      @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .14));
-    }
-  }
-}
diff --git a/packages/mdc-checkbox/mdc-checkbox.scss b/packages/mdc-checkbox/mdc-checkbox.scss
index 20c398d2bbe..9b2e973544b 100644
--- a/packages/mdc-checkbox/mdc-checkbox.scss
+++ b/packages/mdc-checkbox/mdc-checkbox.scss
@@ -52,6 +52,10 @@
 
 // postcss-bem-linter: define checkbox
 .mdc-checkbox {
+  @include mdc-ripple-base;
+  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
+  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
+
   display: inline-block;
   position: relative;
   box-sizing: content-box;
@@ -63,6 +67,22 @@
   cursor: pointer;
   vertical-align: bottom;
 
+  &::before,
+  &::after {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  // stylelint-disable plugin/selector-bem-pattern
+  &.mdc-ripple-upgraded--unbounded {
+    .mdc-checkbox__background::before {
+      content: none;
+    }
+  }
+  // stylelint-enable plugin/selector-bem-pattern
+
   &__background {
     @include mdc-checkbox-outer-box;
 
@@ -329,13 +349,3 @@ fieldset:disabled .mdc-checkbox__native-control,
   }
 }
 // postcss-bem-linter: end
-
-.mdc-checkbox.mdc-ripple-upgraded {
-  @include mdc-ripple-base;
-  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
-  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
-
-  .mdc-checkbox__background::before {
-    content: none;
-  }
-}
diff --git a/packages/mdc-fab/mdc-fab.scss b/packages/mdc-fab/mdc-fab.scss
index 98178fcb498..ae29beb8ea8 100644
--- a/packages/mdc-fab/mdc-fab.scss
+++ b/packages/mdc-fab/mdc-fab.scss
@@ -20,6 +20,10 @@
 
 // postcss-bem-linter: define fab
 .mdc-fab {
+  @include mdc-ripple-base;
+  @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .16));
+  @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .16));
+
   display: inline-flex;
   position: relative;
   justify-content: center;
@@ -36,6 +40,7 @@
   -moz-appearance: none;
   -webkit-appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, .18);
+  overflow: hidden;
 
   @include mdc-theme-prop(background-color, accent);
   @include mdc-theme-prop(color, text-primary-on-accent);
@@ -50,6 +55,8 @@
     background-color: white;
 
     @include mdc-theme-prop(color, text-primary-on-light);
+    @include mdc-ripple-bg((pseudo: "::before"));
+    @include mdc-ripple-fg((pseudo: "::after"));
   }
 
   &::before {
@@ -60,7 +67,7 @@
     height: 100%;
     transition: mdc-animation-exit(opacity, 120ms);
     border-radius: inherit;
-    background: black;
+    background: rgba(0, 0, 0, .2);
     content: "";
     opacity: 0;
   }
@@ -124,16 +131,3 @@
 }
 
 // postcss-bem-linter: end
-
-.mdc-fab.mdc-ripple-upgraded {
-  @include mdc-ripple-base;
-  @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .16));
-  @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .16));
-
-  overflow: hidden;
-}
-
-.mdc-fab--plain.mdc-ripple-upgraded {
-  @include mdc-ripple-bg((pseudo: "::before"));
-  @include mdc-ripple-fg((pseudo: "::after"));
-}
diff --git a/packages/mdc-icon-toggle/mdc-icon-toggle.scss b/packages/mdc-icon-toggle/mdc-icon-toggle.scss
index e9387d41e51..7f34f6abd2b 100644
--- a/packages/mdc-icon-toggle/mdc-icon-toggle.scss
+++ b/packages/mdc-icon-toggle/mdc-icon-toggle.scss
@@ -22,7 +22,32 @@
 
 .mdc-icon-toggle {
   @include mdc-theme-prop(color, text-secondary-on-light);
+  @include mdc-ripple-base;
+  // NOTE: The spec denotes specific opacity values to use for different styles of icon buttons,
+  // either "light", "dark", or "color". Because ripples are made up of two distinct elements,
+  // we need to use an opacity value such that when two elements of the same color and opacity are
+  // layered on top of one another, they create the opacity specified in the spec.
+  // This is done by using the painter's compositing algorithm:
+  //
+  // alpha[desired] = alpha[a] + alpha[b](1 - alpha[a]).
+  //
+  // Because both alpha values are the same this reduces to:
+  //
+  // alpha[desired] = alpha[a] + alpha[a](1 - alpha[a]).
+  //
+  // We simply solve this quadratic equation for the nonnegative root between [0, 1].
+  // E.g. for black 12% opacity:
+  // https://www.wolframalpha.com/input/?i=x+%2B+x(1+-+x)+%3D+.12,+x+%3C%3D+1,+x+%3E%3D+0
+  @include mdc-ripple-bg((pseudo: "::before", opacity: .062));
+  @include mdc-ripple-fg((pseudo: "::after", opacity: .062));
 
+  @include mdc-theme-dark(".mdc-icon-toggle", true) {
+    @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .16));
+    @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .16));
+  }
+
+  // For some reason, GPU layer promotion makes ripples look terrible on Chrome
+  will-change: initial;
   display: flex;
   position: relative;
   box-sizing: border-box;
@@ -38,47 +63,27 @@
 
   &::after {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transform: scale(0, 0);
-    transition: mdc-animation-exit(opacity, 80ms), mdc-animation-exit(transform, 80ms);
     border-radius: 50%;
-    background-color: currentColor;
     content: "";
     opacity: 0;
     pointer-events: none;
   }
 
-  &:focus::after {
-    transform: scale(1.3, 1.3);
-    transition: mdc-animation-enter(opacity, 80ms), mdc-animation-enter(transform, 80ms);
-    opacity: .12;
-  }
-
   @include mdc-theme-dark {
     @include mdc-theme-prop(color, text-primary-on-dark);
-
-    &:focus::after {
-      opacity: .3;
-    }
   }
 }
 
 .mdc-icon-toggle--primary {
   @include mdc-theme-prop(color, primary);
+  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
+  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
 }
 
 .mdc-icon-toggle--accent {
   @include mdc-theme-prop(color, accent);
-}
-
-.mdc-icon-toggle--primary,
-.mdc-icon-toggle--accent {
-  &:focus::after {
-    opacity: .26;
-  }
+  @include mdc-ripple-bg((pseudo: "::before", theme-style: accent, opacity: .14));
+  @include mdc-ripple-fg((pseudo: "::after", theme-style: accent, opacity: .14));
 }
 
 .mdc-icon-toggle--disabled {
@@ -92,42 +97,3 @@
 }
 
 /** postcss-bem-linter: end */
-
-.mdc-icon-toggle.mdc-ripple-upgraded {
-  @include mdc-ripple-base;
-  // NOTE: The spec denotes specific opacity values to use for different styles of icon buttons,
-  // either "light", "dark", or "color". Because ripples are made up of two distinct elements,
-  // we need to use an opacity value such that when two elements of the same color and opacity are
-  // layered on top of one another, they create the opacity specified in the spec.
-  // This is done by using the painter's compositing algorithm:
-  //
-  // alpha[desired] = alpha[a] + alpha[b](1 - alpha[a]).
-  //
-  // Because both alpha values are the same this reduces to:
-  //
-  // alpha[desired] = alpha[a] + alpha[a](1 - alpha[a]).
-  //
-  // We simply solve this quadratic equation for the nonnegative root between [0, 1].
-  // E.g. for black 12% opacity:
-  // https://www.wolframalpha.com/input/?i=x+%2B+x(1+-+x)+%3D+.12,+x+%3C%3D+1,+x+%3E%3D+0
-  @include mdc-ripple-bg((pseudo: "::before", opacity: .062));
-  @include mdc-ripple-fg((pseudo: "::after", opacity: .062));
-
-  @include mdc-theme-dark(".mdc-icon-toggle", true) {
-    @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .16));
-    @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .16));
-  }
-
-  // For some reason, GPU layer promotion makes ripples look terrible on Chrome
-  will-change: initial;
-}
-
-.mdc-icon-toggle--primary.mdc-ripple-upgraded {
-  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
-  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
-}
-
-.mdc-icon-toggle--accent.mdc-ripple-upgraded {
-  @include mdc-ripple-bg((pseudo: "::before", theme-style: accent, opacity: .14));
-  @include mdc-ripple-fg((pseudo: "::after", theme-style: accent, opacity: .14));
-}
diff --git a/packages/mdc-radio/mdc-radio.scss b/packages/mdc-radio/mdc-radio.scss
index 5375917d428..3bed2634526 100644
--- a/packages/mdc-radio/mdc-radio.scss
+++ b/packages/mdc-radio/mdc-radio.scss
@@ -1,18 +1,18 @@
-// 
+//
 // Copyright 2016 Google Inc. All Rights Reserved.
-// 
+//
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
-// 
+//
 //      http://www.apache.org/licenses/LICENSE-2.0
-// 
+//
 // Unless required by applicable law or agreed to in writing, software
 // distributed under the License is distributed on an "AS IS" BASIS,
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-// 
+//
 
 @import "@material/animation/functions";
 @import "@material/ripple/mixins";
@@ -33,6 +33,10 @@ $mdc-radio-transition-duration: 120ms;
 
 // postcss-bem-linter: define radio
 .mdc-radio {
+  @include mdc-ripple-base;
+  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
+  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
+
   display: inline-block;
   position: relative;
   box-sizing: border-box;
@@ -42,6 +46,22 @@ $mdc-radio-transition-duration: 120ms;
   cursor: pointer;
   will-change: opacity, transform, border-color, background-color, color;
 
+  &::before,
+  &::after {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  // stylelint-disable plugin/selector-bem-pattern
+  &.mdc-ripple-upgraded {
+    .mdc-radio__background::before {
+      content: none;
+    }
+  }
+  // stylelint-enable plugin/selector-bem-pattern
+
   // Container for radio circles and ripple.
   &__background {
     display: inline-block;
@@ -179,20 +199,10 @@ fieldset:disabled .mdc-radio__native-control,
 
 .mdc-radio__native-control:focus {
   + .mdc-radio__background::before {
-    transform: scale(2.8, 2.8);
+    transform: scale(2, 2);
     transition: mdc-radio-enter(opacity), mdc-radio-enter(transform);
     opacity: .26;
   }
 }
 
 // postcss-bem-linter: end
-
-.mdc-radio.mdc-ripple-upgraded {
-  @include mdc-ripple-base;
-  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
-  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
-
-  .mdc-radio__background::before {
-    content: none;
-  }
-}
diff --git a/packages/mdc-ripple/README.md b/packages/mdc-ripple/README.md
index 5468b4950ef..9cf417b8c36 100644
--- a/packages/mdc-ripple/README.md
+++ b/packages/mdc-ripple/README.md
@@ -25,10 +25,9 @@
   - [Caveat: Safari](#caveat-safari)
   - [Caveat: Theme Custom Variables](#caveat-theme-custom-variables)
 
-MDC Ripple provides the Javascript and CSS required
-to provide components (or any element at all) with a
-material "ink ripple" interaction effect. It is designed to be efficient, un-invasive, and usable
-without adding any extra DOM to your elements.
+MDC Ripple provides the Javascript and CSS required to provide components (or any element at all) with a material "ink ripple" interaction effect. It is designed to be efficient, uninvasive, and usable without adding any extra DOM to your elements.
+
+MDC Ripple also works without javascript, where it gracefully degrades to a simpler CSS-Only implementation.
 
 ### An aside regarding browser support
 
@@ -39,8 +38,6 @@ Because we rely on scoped, dynamic CSS variables, static pre-processors such as
 [Most modern browsers](http://caniuse.com/#feat=css-variables) support CSS variables, so MDC ripple will work just fine. In other cases, MDC ripple will _still work_ if you include it in your codebase. It will simply check if CSS variables are supported upon initialization and if they aren't, gracefully exit. The only exception to this rule is Safari, which does support CSS variables
 but unfortunately ripples are disabled for (see [below](#caveat-safari) for an explanation).
 
-Given this, it is important that you _provide gracefully degraded interaction states_ for browsers in which the ripple is not supported. We do this for all of our components.
-
 
 ## Installation
 
@@ -74,41 +71,17 @@ use [mdc-elevation](https://github.com/material-components/material-components-w
   text-align: center;
   /* Indicate to user element is interactive. */
   cursor: pointer;
-
-
-  /* Use the surface's ::before pseudo-element as a basic interaction indicator */
-
-  &::before {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    pointer-events: none;
-    background-color: black;
-    transition: opacity 110ms ease;
-    will-change: opacity;
-  }
-
-  &:active::before {
-    opacity: .18;
-  }
-
-  &:focus::before {
-    opacity: .06;
-  }
-}
 ```
 
 #### Adding the ripple Sass
 
-When a ripple is successfully initialized on an element, it dynamically adds a `mdc-ripple-upgraded` class to that element. Therefore, to add a ripple to our surface, first we include the proper Sass mixins within our surface's styles when it contains this class. We also add a few additional properties that ensure the ripple's UX is correct.
+To add a ripple to our surface, first we include the proper Sass mixins within our surface's styles. We also add a few additional properties that ensure the ripple's UX is correct.
 
 ```scss
 @import "@material/elevation/mixins";
 @import "@material/ripple/mixins";
 
-.surface.mdc-ripple-upgraded {
+.surface {
   @include mdc-ripple-base;
   @include mdc-ripple-bg((pseudo: "::before"));
   @include mdc-ripple-fg((pseudo: "::after"));
@@ -121,6 +94,8 @@ When a ripple is successfully initialized on an element, it dynamically adds a `
 
 This code sets up `.surface` with the correct css variables as well as `will-change` properties to support the ripple. It then dynamically generates the correct selectors such that the surface's `::before` element functions as a background ripple, and the surface's `::after` element functions as a foreground ripple.
 
+When a ripple is successfully initialized on an element, it dynamically adds a `mdc-ripple-upgraded` class to that element. If ripple is not initialized but Sass misins are included within our surface, the ripple will still work, but it would use a simpler, CSS-Only implementation which relies on `:hover`, `:active`, and `:focus`.
+
 ##### The full Sass API
 
 Both `mdc-ripple-bg` and `mdc-ripple-fg` take an `$config` map as an optional
diff --git a/packages/mdc-ripple/_mixins.scss b/packages/mdc-ripple/_mixins.scss
index 9cd91a85daf..04426a1267d 100644
--- a/packages/mdc-ripple/_mixins.scss
+++ b/packages/mdc-ripple/_mixins.scss
@@ -40,8 +40,17 @@
   --mdc-ripple-fg-unbounded-transform-duration: 0ms;
   --mdc-ripple-fg-approx-xf: 0;
 
-  will-change: transition, opacity;
+  will-change: transform, opacity;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  &:not(.mdc-ripple-upgraded) {
+    &:hover::before,
+    &:focus::before,
+    &:active::after {
+      transition-duration: 85ms;
+      opacity: .6;
+    }
+  }
 }
 
 @mixin mdc-ripple-color_($config) {
@@ -65,6 +74,7 @@
   } @else {
     background-color: rgba($base-color, $opacity);
   }
+
   // stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
 }
 
@@ -78,8 +88,7 @@
   left: calc(50% - #{$radius});
   width: $radius * 2;
   height: $radius * 2;
-  transform: scale(var(--mdc-ripple-fg-scale));
-  transition: opacity 200ms linear;
+  transition: opacity 250ms linear;
   border-radius: 50%;
   opacity: 0;
   pointer-events: none;
@@ -88,6 +97,7 @@
 @mixin mdc-ripple-bg($config: ()) {
   $config: map-merge(mdc-ripple-default-config_(), $config);
   $pseudo: map-get($config, pseudo);
+  $radius: map-get($config, radius);
 
   // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
   @if ($pseudo) {
@@ -101,6 +111,14 @@
   }
   // stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
 
+  &.mdc-ripple-upgraded#{$pseudo} {
+    top: calc(50% - #{$radius});
+    left: calc(50% - #{$radius});
+    width: $radius * 2;
+    height: $radius * 2;
+    transform: scale(var(--mdc-ripple-fg-scale, 0));
+  }
+
   &.mdc-ripple-upgraded--background-active#{$pseudo} {
     opacity: .99999;
   }
@@ -118,23 +136,25 @@
   }
 
   &.mdc-ripple-upgraded--unbounded#{$pseudo} {
-    top: var(--mdc-ripple-top);
-    left: var(--mdc-ripple-left);
-    width: var(--mdc-ripple-fg-size);
-    height: var(--mdc-ripple-fg-size);
+    top: var(--mdc-ripple-top, calc(50% - #{$radius / 2}));
+    left: var(--mdc-ripple-left, calc(50% - #{$radius / 2}));
+    width: var(--mdc-ripple-fg-size, $radius);
+    height: var(--mdc-ripple-fg-size, $radius);
+    transform: scale(var(--mdc-ripple-fg-scale, 0));
   }
 }
 
 @mixin mdc-ripple-fg-base_($config) {
+  $radius: map-get($config, radius);
+
   @include mdc-ripple-color_($config);
 
   position: absolute;
-  top: 0;
-  left: 0;
-  width: var(--mdc-ripple-fg-size);
-  height: var(--mdc-ripple-fg-size);
-  transform: scale(0);
-  transform-origin: center center;
+  top: calc(50% - #{$radius});
+  left: calc(50% - #{$radius});
+  width: $radius * 2;
+  height: $radius * 2;
+  transition: opacity 250ms linear;
   border-radius: 50%;
   opacity: 0;
   pointer-events: none;
@@ -143,6 +163,7 @@
 @mixin mdc-ripple-fg($config: ()) {
   $config: map-merge(mdc-ripple-default-config_(), $config);
   $pseudo: map-get($config, pseudo);
+  $radius: map-get($config, radius);
 
   // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
   @if ($pseudo) {
@@ -156,13 +177,28 @@
   }
   // stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
 
+  &.mdc-ripple-upgraded {
+    &#{$pseudo} {
+      top: 0;
+      left: 0;
+      width: var(--mdc-ripple-fg-size, $radius);
+      height: var(--mdc-ripple-fg-size, $radius);
+      transform: scale(0);
+      transform-origin: center center;
+      opacity: 0;
+    }
+  }
+
   &:not(.mdc-ripple-upgraded--unbounded)#{$pseudo} {
     transform-origin: center center;
   }
 
   &.mdc-ripple-upgraded--unbounded#{$pseudo} {
-    top: var(--mdc-ripple-top);
-    left: var(--mdc-ripple-left);
+    top: var(--mdc-ripple-top, 0);
+    left: var(--mdc-ripple-left, 0);
+    width: var(--mdc-ripple-fg-size, $radius);
+    height: var(--mdc-ripple-fg-size, $radius);
+    transform: scale(0);
     transform-origin: center center;
   }
 
@@ -172,16 +208,16 @@
   }
 
   &.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded--foreground-unbounded-activation#{$pseudo} {
-    transform: scale(var(--mdc-ripple-fg-scale));
+    transform: scale(var(--mdc-ripple-fg-scale, 0));
     transition:
       opacity 110ms linear,
-      transform var(--mdc-ripple-fg-unbounded-transform-duration) linear 80ms;
+      transform var(--mdc-ripple-fg-unbounded-transform-duration, 0) linear 80ms;
     opacity: 1;
   }
 
   &.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded--foreground-unbounded-deactivation#{$pseudo} {
     animation:
-      mdc-ripple-fg-unbounded-opacity-deactivate var(--mdc-ripple-fg-unbounded-opacity-duration) linear,
-      mdc-ripple-fg-unbounded-transform-deactivate var(--mdc-ripple-fg-unbounded-transform-duration) $mdc-animation-fast-out-slow-in-timing-function;
+      mdc-ripple-fg-unbounded-opacity-deactivate var(--mdc-ripple-fg-unbounded-opacity-duration, 0) linear,
+      mdc-ripple-fg-unbounded-transform-deactivate var(--mdc-ripple-fg-unbounded-transform-duration, 0) $mdc-animation-fast-out-slow-in-timing-function;
   }
 }
diff --git a/packages/mdc-ripple/foundation.js b/packages/mdc-ripple/foundation.js
index 9ccc24b232e..f5c510cf5e2 100644
--- a/packages/mdc-ripple/foundation.js
+++ b/packages/mdc-ripple/foundation.js
@@ -265,6 +265,7 @@ export default class MDCRippleFoundation extends MDCFoundation {
       VAR_FG_UNBOUNDED_TRANSFORM_DURATION,
       VAR_FG_APPROX_XF,
     } = MDCRippleFoundation.strings;
+
     this.adapter_.updateCssVariable(VAR_FG_APPROX_XF, `scale(${approxCurScale})`);
     this.adapter_.updateCssVariable(VAR_FG_UNBOUNDED_OPACITY_DURATION, `${opacityDuration}ms`);
     this.adapter_.updateCssVariable(VAR_FG_UNBOUNDED_TRANSFORM_DURATION, `${transformDuration}ms`);
diff --git a/packages/mdc-ripple/mdc-ripple.scss b/packages/mdc-ripple/mdc-ripple.scss
index 22b67e02ce4..b7fa239a1e9 100644
--- a/packages/mdc-ripple/mdc-ripple.scss
+++ b/packages/mdc-ripple/mdc-ripple.scss
@@ -21,6 +21,10 @@
 // postcss-bem-linter: define ripple-surface
 
 .mdc-ripple-surface {
+  @include mdc-ripple-base;
+  @include mdc-ripple-bg((pseudo: "::before"));
+  @include mdc-ripple-fg((pseudo: "::after"));
+
   position: relative;
   outline: none;
   overflow: hidden;
@@ -29,51 +33,24 @@
     overflow: visible;
   }
 
-  &::before {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transition: mdc-animation-exit(opacity, 120ms);
-    border-radius: inherit;
-    background: currentColor;
-    content: "";
-    opacity: 0;
-  }
-
-  &:focus::before {
-    opacity: .12;
-  }
-
-  &:active::before {
-    opacity: .18;
-  }
-
-  &.mdc-ripple-upgraded {
-    @include mdc-ripple-base;
-    @include mdc-ripple-bg((pseudo: "::before"));
-    @include mdc-ripple-fg((pseudo: "::after"));
-  }
-
-  &--primary.mdc-ripple-upgraded {
+  &--primary {
     &::before,
     &::after {
       @include mdc-theme-prop(background-color, primary);
     }
 
-    @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
-    @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
+    @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .16));
+    @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .16));
   }
 
-  &--accent.mdc-ripple-upgraded {
+  &--accent {
     &::before,
     &::after {
       @include mdc-theme-prop(background-color, primary);
     }
 
-    @include mdc-ripple-bg((pseudo: "::before", theme-style: accent, opacity: .14));
-    @include mdc-ripple-fg((pseudo: "::after", theme-style: accent, opacity: .14));
+    @include mdc-ripple-bg((pseudo: "::before", theme-style: accent, opacity: .16));
+    @include mdc-ripple-fg((pseudo: "::after", theme-style: accent, opacity: .16));
   }
 }
 
diff --git a/test/unit/mdc-ripple/foundation-deactivation.test.js b/test/unit/mdc-ripple/foundation-deactivation.test.js
index 7e45c0df0bd..7a288a8bd92 100644
--- a/test/unit/mdc-ripple/foundation-deactivation.test.js
+++ b/test/unit/mdc-ripple/foundation-deactivation.test.js
@@ -279,6 +279,8 @@ testFoundation('triggers unbounded deactivation based on time it took to activat
   const xfDuration = 1000 * Math.sqrt(maxRadius / 1024);
 
   const scaleVal = baseElapsedTime / xfDuration * fgScale;
+
+
   td.verify(adapter.updateCssVariable(strings.VAR_FG_APPROX_XF, `scale(${scaleVal})`));
   td.verify(adapter.updateCssVariable(
     strings.VAR_FG_UNBOUNDED_TRANSFORM_DURATION, `${numbers.UNBOUNDED_TRANSFORM_DURATION_MS}ms`