diff --git a/core/src/components/button/button.ionic.scss b/core/src/components/button/button.ionic.scss
index cf6a014af6..d4386b5e57 100644
--- a/core/src/components/button/button.ionic.scss
+++ b/core/src/components/button/button.ionic.scss
@@ -102,7 +102,7 @@
 // -------------------------------------------------------------------------------
 
 :host(.button-solid.ion-color) ion-ripple-effect {
-  color: var(--ion-color-shade, #{globals.ion-color(primary, shade)});
+  color: globals.ion-color(primary, shade);
 }
 
 :host(.button-outline.ion-color) ion-ripple-effect,