diff --git a/src/material-experimental/mdc-button/_button-base.scss b/src/material-experimental/mdc-button/_button-base.scss
index 9d397146db84..5f81f8ce8804 100644
--- a/src/material-experimental/mdc-button/_button-base.scss
+++ b/src/material-experimental/mdc-button/_button-base.scss
@@ -6,7 +6,7 @@
 // ripple and state container so that they fill the button, match the border radius, and avoid
 // pointer events.
 @mixin _mat-button-interactive() {
-  .mat-mdc-button-state::before, .mat-mdc-button-state::after {
+  .mdc-button__ripple::before, .mdc-button__ripple::after {
     content: '';
     pointer-events: none;
     position: absolute;
@@ -20,7 +20,7 @@
   }
 
   // The ripple container should match the bounds of the entire button.
-  .mat-mdc-button-ripple, .mat-mdc-button-state {
+  .mat-mdc-button-ripple, .mdc-button__ripple {
     @include mat-fill;
 
     // Disable pointer events for the ripple container and state overlay because the container
diff --git a/src/material-experimental/mdc-button/_mdc-button.scss b/src/material-experimental/mdc-button/_mdc-button.scss
index ad1c98f34308..8afc49a17486 100644
--- a/src/material-experimental/mdc-button/_mdc-button.scss
+++ b/src/material-experimental/mdc-button/_mdc-button.scss
@@ -9,7 +9,7 @@
 // Selector for the element that has a background color and opacity applied to its ::before and
 // ::after for state interactions (hover, active, focus). Their API calls this their
 // "ripple target", but we do not use it as our ripple, just state color.
-$mat-button-state-target: '.mat-mdc-button-state';
+$mat-button-state-target: '.mdc-button__ripple';
 
 // Applies the disabled theme color to the text color.
 @mixin _mat-button-disabled-color() {
diff --git a/src/material-experimental/mdc-button/button.html b/src/material-experimental/mdc-button/button.html
index 210fb6d9eb51..a1ee7c955948 100644
--- a/src/material-experimental/mdc-button/button.html
+++ b/src/material-experimental/mdc-button/button.html
@@ -1,4 +1,4 @@
-<span class="mat-mdc-button-state"></span>
+<span class="mdc-button__ripple"></span>
 
 <ng-content select=".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd])">
 </ng-content>
diff --git a/src/material-experimental/mdc-button/button.scss b/src/material-experimental/mdc-button/button.scss
index 869b51ee5206..84824b4b56f2 100644
--- a/src/material-experimental/mdc-button/button.scss
+++ b/src/material-experimental/mdc-button/button.scss
@@ -29,9 +29,11 @@
 // In order to work around this issue by *not* hiding overflow, we adjust the child elements
 // to fully cover the actual button element. This means that the border-radius would be correct
 // then. See: https://github.com/angular/components/issues/13738
-.mat-mdc-outlined-button .mat-mdc-button-ripple {
+.mat-mdc-outlined-button .mat-mdc-button-ripple,
+.mat-mdc-outlined-button .mdc-button__ripple {
   top: -$mdc-button-outlined-border-width;
   left: -$mdc-button-outlined-border-width;
   bottom: -$mdc-button-outlined-border-width;
   right: -$mdc-button-outlined-border-width;
+  border: none;
 }