diff --git a/core/src/components/ripple-effect/ripple-effect.scss b/core/src/components/ripple-effect/ripple-effect.scss
index 36bf6a1a7a..8b4587740f 100644
--- a/core/src/components/ripple-effect/ripple-effect.scss
+++ b/core/src/components/ripple-effect/ripple-effect.scss
@@ -15,6 +15,7 @@ $opacity-duration: $fade-in-duration + $fade-out-duration;
   position: absolute;
 
   contain: strict;
+  pointer-events: none;
 }
 
 :host(.unbounded) {
diff --git a/core/src/components/ripple-effect/test/basic/index.html b/core/src/components/ripple-effect/test/basic/index.html
index 95ecc4e87b..e22b4a8abc 100644
--- a/core/src/components/ripple-effect/test/basic/index.html
+++ b/core/src/components/ripple-effect/test/basic/index.html
@@ -78,7 +78,7 @@
         <ion-ripple-effect></ion-ripple-effect>
       </a>
 
-      <button class="my-block">
+      <button class="my-block ion-activatable">
         This is just a button + effect on top
         <ion-button onclick="buttonClicked()">Nested button</ion-button>
         <ion-ripple-effect></ion-ripple-effect>