diff --git a/src/material-experimental/mdc-button/BUILD.bazel b/src/material-experimental/mdc-button/BUILD.bazel
index 65b89f0ab1ad..50b3b372a9ec 100644
--- a/src/material-experimental/mdc-button/BUILD.bazel
+++ b/src/material-experimental/mdc-button/BUILD.bazel
@@ -20,6 +20,7 @@ ng_module(
         ],
     ),
     assets = [
+        ":button_high_contrast_scss",
         ":button_scss",
         ":fab_scss",
         ":icon-button_scss",
@@ -54,12 +55,18 @@ sass_binary(
     ],
     deps = [
         ":button_base_scss_lib",
-        "//src/cdk/a11y:a11y_scss_lib",
         "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
         "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
     ],
 )
 
+sass_binary(
+    name = "button_high_contrast_scss",
+    src = "button-high-contrast.scss",
+    include_paths = ["external/npm/node_modules"],
+    deps = ["//src/cdk/a11y:a11y_scss_lib"],
+)
+
 sass_binary(
     name = "fab_scss",
     src = "fab.scss",
diff --git a/src/material-experimental/mdc-button/button-high-contrast.scss b/src/material-experimental/mdc-button/button-high-contrast.scss
new file mode 100644
index 000000000000..d23f32e193a2
--- /dev/null
+++ b/src/material-experimental/mdc-button/button-high-contrast.scss
@@ -0,0 +1,19 @@
+@use '../../cdk/a11y';
+
+// Add an outline to make buttons more visible in high contrast mode. Stroked buttons and FABs
+// don't need a special look in high-contrast mode, because those already have an outline.
+.mat-mdc-button:not(.mdc-button--outlined),
+.mat-mdc-unelevated-button:not(.mdc-button--outlined),
+.mat-mdc-raised-button:not(.mdc-button--outlined),
+.mat-mdc-outlined-button:not(.mdc-button--outlined),
+.mat-mdc-icon-button {
+  @include a11y.high-contrast(active, off) {
+    outline: solid 1px;
+  }
+}
+
+@include a11y.high-contrast(active, off) {
+  .mat-mdc-button-base:focus {
+    outline: solid 3px;
+  }
+}
diff --git a/src/material-experimental/mdc-button/button.scss b/src/material-experimental/mdc-button/button.scss
index 43be195a5daa..1e0d2f71a41d 100644
--- a/src/material-experimental/mdc-button/button.scss
+++ b/src/material-experimental/mdc-button/button.scss
@@ -2,7 +2,6 @@
 @use '@material/button/variables' as mdc-button-variables;
 @use '../../material/core/style/private';
 @use '../mdc-helpers/mdc-helpers';
-@use '../../cdk/a11y';
 @use 'button-base';
 
 
@@ -42,24 +41,6 @@
   }
 }
 
-// Add an outline to make buttons more visible in high contrast mode. Stroked buttons and FABs
-// don't need a special look in high-contrast mode, because those already have an outline.
-.mat-mdc-button:not(.mdc-button--outlined),
-.mat-mdc-unelevated-button:not(.mdc-button--outlined),
-.mat-mdc-raised-button:not(.mdc-button--outlined),
-.mat-mdc-outlined-button:not(.mdc-button--outlined),
-.mat-mdc-icon-button {
-  @include a11y.high-contrast(active, off) {
-    outline: solid 1px;
-  }
-}
-
-@include a11y.high-contrast(active, off) {
-  .mat-mdc-button-base:focus {
-    outline: solid 3px;
-  }
-}
-
 // Since the stroked button has has an actual border that reduces the available space for
 // child elements such as the ripple container or focus overlay, an inherited border radius
 // for the absolute-positioned child elements does not work properly. This is because the
diff --git a/src/material-experimental/mdc-button/button.ts b/src/material-experimental/mdc-button/button.ts
index 2758938f8ad8..c59ad03b942d 100644
--- a/src/material-experimental/mdc-button/button.ts
+++ b/src/material-experimental/mdc-button/button.ts
@@ -42,7 +42,7 @@ import {
     button[mat-stroked-button]
   `,
   templateUrl: 'button.html',
-  styleUrls: ['button.css'],
+  styleUrls: ['button.css', 'button-high-contrast.css'],
   inputs: MAT_BUTTON_INPUTS,
   host: MAT_BUTTON_HOST,
   exportAs: 'matButton',
@@ -73,7 +73,7 @@ export class MatButton extends MatButtonBase {
   host: MAT_ANCHOR_HOST,
   inputs: MAT_ANCHOR_INPUTS,
   templateUrl: 'button.html',
-  styleUrls: ['button.css'],
+  styleUrls: ['button.css', 'button-high-contrast.css'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/src/material-experimental/mdc-button/icon-button.ts b/src/material-experimental/mdc-button/icon-button.ts
index 6d975d19f6fc..f32f66e5c0ae 100644
--- a/src/material-experimental/mdc-button/icon-button.ts
+++ b/src/material-experimental/mdc-button/icon-button.ts
@@ -35,7 +35,7 @@ import {
 @Component({
   selector: `button[mat-icon-button]`,
   templateUrl: 'button.html',
-  styleUrls: ['icon-button.css'],
+  styleUrls: ['icon-button.css', 'button-high-contrast.css'],
   inputs: MAT_BUTTON_INPUTS,
   host: MAT_BUTTON_HOST,
   exportAs: 'matButton',
@@ -61,7 +61,7 @@ export class MatIconButton extends MatButtonBase {
 @Component({
   selector: `a[mat-icon-button]`,
   templateUrl: 'button.html',
-  styleUrls: ['icon-button.css'],
+  styleUrls: ['icon-button.css', 'button-high-contrast.css'],
   inputs: MAT_ANCHOR_INPUTS,
   host: MAT_ANCHOR_HOST,
   exportAs: 'matButton, matAnchor',