diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss
index 1f7bc23d0b..9ca426ba73 100644
--- a/core/src/components/button/button.scss
+++ b/core/src/components/button/button.scss
@@ -63,12 +63,12 @@
 }
 
 :host(.button-disabled) {
+  --opacity: .5;
   pointer-events: none;
 }
 
 :host(.button-disabled) .button-native {
   cursor: default;
-  opacity: .5;
   pointer-events: none;
 }
 
diff --git a/core/src/components/button/test/basic/index.html b/core/src/components/button/test/basic/index.html
index 4ad9f443e3..1fb5ecdbab 100644
--- a/core/src/components/button/test/basic/index.html
+++ b/core/src/components/button/test/basic/index.html
@@ -81,9 +81,14 @@
         <ion-button class="activated" color="dark">Dark.activated</ion-button>
       </p>
 
+      <p>
+        <ion-button style="--opacity: .2">Opacity: 0.2</ion-button>
+      </p>
+
       <p>
         <ion-button expand="block" id="disabledButton" disabled onclick="clickedButton(event)">Button Disabled</ion-button>
         <ion-button expand="block" color="secondary" disabled>Secondary Disabled</ion-button>
+        <ion-button expand="block" color="tertiary" style="--opacity: 1" disabled>Disabled opacity: 1</ion-button>
       </p>
 
       <p>