diff --git a/core/src/components/back-button/back-button.scss b/core/src/components/back-button/back-button.scss
index 97e3342af4..9876135285 100644
--- a/core/src/components/back-button/back-button.scss
+++ b/core/src/components/back-button/back-button.scss
@@ -92,6 +92,13 @@
   font-kerning: none;
 }
 
+// Back Button Ripple effect
+// --------------------------------------------------
+
+ion-ripple-effect {
+  color: var(--ripple-color);
+}
+
 
 // Back Button with Color
 // --------------------------------------------------
@@ -241,4 +248,4 @@ ion-icon {
 
 :host(.in-toolbar:not(.in-toolbar-color)) {
   color: #{var(--ion-toolbar-color, var(--color))};
-}
\ No newline at end of file
+}
diff --git a/core/src/components/back-button/test/basic/index.html b/core/src/components/back-button/test/basic/index.html
index 23bf417c0f..7037ca5819 100644
--- a/core/src/components/back-button/test/basic/index.html
+++ b/core/src/components/back-button/test/basic/index.html
@@ -78,6 +78,8 @@
         <ion-back-button color="secondary" class="custom"></ion-back-button>
         <ion-back-button class="custom ion-focused"></ion-back-button>
         <ion-back-button color="secondary" class="custom ion-focused"></ion-back-button>
+        <ion-back-button class="ripple"></ion-back-button>
+        <ion-back-button class="ripple" color="primary"></ion-back-button>
       </p>
 
       <ion-toolbar>
@@ -195,6 +197,10 @@
       --ion-toolbar-background: #222;
       --ion-toolbar-color: #ddd;
     }
+
+    .ripple {
+      --ripple-color: red;
+    }
   </style>
 </body>