diff --git a/button/internal/_elevation.scss b/button/internal/_elevation.scss
index 5806dd5e5a..1899999e44 100644
--- a/button/internal/_elevation.scss
+++ b/button/internal/_elevation.scss
@@ -20,50 +20,50 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     transition-timing-function: map.get($_md-sys-motion, 'emphasized-easing');
   }
 
-  .button:disabled md-elevation {
+  :host([disabled]) md-elevation {
     transition: none;
   }
 
-  .button {
+  md-elevation {
     @include elevation.theme(
       (
         'level': var(--_container-elevation),
         'shadow-color': var(--_container-shadow-color),
       )
     );
+  }
 
-    // apply elevation in order of focused, hovered, pressed, disabled
-    // this ensures a button will have hover elevation after being focused
-    &:focus {
-      @include elevation.theme(
-        (
-          'level': var(--_focus-container-elevation),
-        )
-      );
-    }
+  // apply elevation in order of focused, hovered, pressed, disabled
+  // this ensures a button will have hover elevation after being focused
+  :host(:focus-within) md-elevation {
+    @include elevation.theme(
+      (
+        'level': var(--_focus-container-elevation),
+      )
+    );
+  }
 
-    &:hover {
-      @include elevation.theme(
-        (
-          'level': var(--_hover-container-elevation),
-        )
-      );
-    }
+  :host(:hover) md-elevation {
+    @include elevation.theme(
+      (
+        'level': var(--_hover-container-elevation),
+      )
+    );
+  }
 
-    &:active {
-      @include elevation.theme(
-        (
-          'level': var(--_pressed-container-elevation),
-        )
-      );
-    }
+  :host(:active) md-elevation {
+    @include elevation.theme(
+      (
+        'level': var(--_pressed-container-elevation),
+      )
+    );
+  }
 
-    &:disabled {
-      @include elevation.theme(
-        (
-          'level': var(--_disabled-container-elevation),
-        )
-      );
-    }
+  :host([disabled]) md-elevation {
+    @include elevation.theme(
+      (
+        'level': var(--_disabled-container-elevation),
+      )
+    );
   }
 }
diff --git a/button/internal/_icon.scss b/button/internal/_icon.scss
index b2e51d0103..e98682f905 100644
--- a/button/internal/_icon.scss
+++ b/button/internal/_icon.scss
@@ -8,32 +8,30 @@
   // class, which is loaded separately so the order of CSS definitions is not
   // guaranteed. Therefore, increase specifity to ensure overrides apply.
   ::slotted([slot='icon']) {
-    .button & {
-      display: inline-flex;
-      position: relative;
-      writing-mode: horizontal-tb;
-      fill: currentColor;
-      color: var(--_icon-color);
-      font-size: var(--_icon-size);
-      inline-size: var(--_icon-size);
-      block-size: var(--_icon-size);
-    }
+    display: inline-flex;
+    position: relative;
+    writing-mode: horizontal-tb;
+    fill: currentColor;
+    color: var(--_icon-color);
+    font-size: var(--_icon-size);
+    inline-size: var(--_icon-size);
+    block-size: var(--_icon-size);
+  }
 
-    .button:hover & {
-      color: var(--_hover-icon-color);
-    }
+  :host(:hover) ::slotted([slot='icon']) {
+    color: var(--_hover-icon-color);
+  }
 
-    .button:focus & {
-      color: var(--_focus-icon-color);
-    }
+  :host(:focus-within) ::slotted([slot='icon']) {
+    color: var(--_focus-icon-color);
+  }
 
-    .button:active & {
-      color: var(--_pressed-icon-color);
-    }
+  :host(:active) ::slotted([slot='icon']) {
+    color: var(--_pressed-icon-color);
+  }
 
-    .button:disabled & {
-      color: var(--_disabled-icon-color);
-      opacity: var(--_disabled-icon-opacity);
-    }
+  :host([disabled]) ::slotted([slot='icon']) {
+    color: var(--_disabled-icon-color);
+    opacity: var(--_disabled-icon-opacity);
   }
 }
diff --git a/button/internal/_outlined-button.scss b/button/internal/_outlined-button.scss
index d5d0b3db8b..9a3b6be3dc 100644
--- a/button/internal/_outlined-button.scss
+++ b/button/internal/_outlined-button.scss
@@ -74,20 +74,20 @@
     border-start-end-radius: var(--_container-shape-start-end);
     border-end-start-radius: var(--_container-shape-end-start);
     border-end-end-radius: var(--_container-shape-end-end);
+  }
 
-    .button:active & {
-      border-color: var(--_pressed-outline-color);
-    }
+  :host(:active) .button__outline {
+    border-color: var(--_pressed-outline-color);
+  }
 
-    .button:disabled & {
-      border-color: var(--_disabled-outline-color);
-      opacity: var(--_disabled-outline-opacity);
-    }
+  :host([disabled]) .button__outline {
+    border-color: var(--_disabled-outline-color);
+    opacity: var(--_disabled-outline-opacity);
+  }
 
-    @media (forced-colors: active) {
-      .button:disabled & {
-        opacity: 1;
-      }
+  @media (forced-colors: active) {
+    :host([disabled]) .button__outline {
+      opacity: 1;
     }
   }
 
diff --git a/button/internal/_shared.scss b/button/internal/_shared.scss
index 7e715a06a0..c723bd2f63 100644
--- a/button/internal/_shared.scss
+++ b/button/internal/_shared.scss
@@ -13,6 +13,7 @@
 
 @mixin styles() {
   :host {
+    cursor: pointer;
     display: inline-flex;
     height: var(--_container-height);
     outline: none;
@@ -57,6 +58,7 @@
   }
 
   .button {
+    cursor: inherit;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -80,60 +82,58 @@
     padding-inline-end: var(--_trailing-space);
     gap: 8px;
 
-    &::before {
-      // Background color. Separate node for disabled opacity styles.
-      background-color: var(--_container-color);
-      border-radius: inherit;
-      content: '';
-      inset: 0;
-      position: absolute;
-    }
-
     &::-moz-focus-inner {
       padding: 0;
       border: 0;
     }
+  }
 
-    &:hover {
-      color: var(--_hover-label-text-color);
-      cursor: pointer;
-    }
+  :host(:hover) .button {
+    color: var(--_hover-label-text-color);
+  }
 
-    &:focus {
-      color: var(--_focus-label-text-color);
-    }
+  :host(:focus-within) .button {
+    color: var(--_focus-label-text-color);
+  }
 
-    &:active {
-      color: var(--_pressed-label-text-color);
-      outline: none;
-    }
+  :host(:active) .button {
+    color: var(--_pressed-label-text-color);
+  }
 
-    &:disabled .button__label {
-      color: var(--_disabled-label-text-color);
-      opacity: var(--_disabled-label-text-opacity);
-    }
+  .button::before {
+    // Background color. Separate node for disabled opacity styles.
+    background-color: var(--_container-color);
+    border-radius: inherit;
+    content: '';
+    inset: 0;
+    position: absolute;
+  }
 
-    &:disabled::before {
-      background-color: var(--_disabled-container-color);
-      opacity: var(--_disabled-container-opacity);
+  :host([disabled]) .button__label {
+    color: var(--_disabled-label-text-color);
+    opacity: var(--_disabled-label-text-opacity);
+  }
+
+  :host([disabled]) .button::before {
+    background-color: var(--_disabled-container-color);
+    opacity: var(--_disabled-container-opacity);
+  }
+
+  @media (forced-colors: active) {
+    .button::before {
+      content: '';
+      box-sizing: border-box;
+      border: 1px solid CanvasText;
+      border-radius: inherit;
+      inset: 0;
+      pointer-events: none;
+      position: absolute;
     }
 
-    @media (forced-colors: active) {
-      &::before {
-        content: '';
-        box-sizing: border-box;
-        border: 1px solid CanvasText;
-        border-radius: inherit;
-        inset: 0;
-        pointer-events: none;
-        position: absolute;
-      }
-
-      &:disabled {
-        --_disabled-icon-opacity: 1;
-        --_disabled-container-opacity: 1;
-        --_disabled-label-text-opacity: 1;
-      }
+    :host([disabled]) .button {
+      --_disabled-icon-opacity: 1;
+      --_disabled-container-opacity: 1;
+      --_disabled-label-text-opacity: 1;
     }
   }