diff --git a/packages/core/src/components/button-effect/button-effect.scss b/packages/core/src/components/button-effect/button-effect.scss
index 70734c27ef..50f295ce12 100644
--- a/packages/core/src/components/button-effect/button-effect.scss
+++ b/packages/core/src/components/button-effect/button-effect.scss
@@ -1,15 +1,20 @@
 @import "../../themes/ionic.globals";
 
+// Material Design Ripple Effect
+// --------------------------------------------------
+// Only Material uses the button effect, so by default
+// it's display none, and .md sets to display block.
+
 /// @prop - Background color of the ripple on the button
 $button-effect-ripple-background-color:       #000 !default;
 
 ion-button-effect {
-  @include position(0);
+  @include position(0, 0, 0, 0);
 
   position: absolute;
 }
 
-ion-button-effect > .ripple {
+.button-effect {
   @include border-radius(50%);
   position: absolute;
 
diff --git a/packages/core/src/components/button-effect/button-effect.tsx b/packages/core/src/components/button-effect/button-effect.tsx
index cbb521d470..4950cbfb21 100644
--- a/packages/core/src/components/button-effect/button-effect.tsx
+++ b/packages/core/src/components/button-effect/button-effect.tsx
@@ -31,17 +31,18 @@ export class ButtonEffect {
 
   private addRipple(pageX: number, pageY: number) {
     const rect = this.el.getBoundingClientRect();
-
-    const size = Math.hypot(rect.width, rect.height) * 2;
+    const width = rect.width;
+    const height = rect.height;
+    const size = Math.sqrt(width * width + height * height) * 2;
     const x = pageX - rect.left - size / 2;
     const y = pageY - rect.top - size / 2;
 
     this.schedule({x, y, size});
   }
 
-  schedule({x, y, size}: Ripple) {
+  private schedule({x, y, size}: Ripple) {
     const div = document.createElement('div');
-    div.classList.add('ripple');
+    div.classList.add('button-effect');
     const style = div.style;
     const duration = Math.max(800 * Math.sqrt(size / TOUCH_DOWN_ACCEL) + 0.5, 260);
     style.top = y + 'px';
diff --git a/packages/core/src/components/button/button.md.scss b/packages/core/src/components/button/button.md.scss
index de40eaf7b1..601a491df7 100644
--- a/packages/core/src/components/button/button.md.scss
+++ b/packages/core/src/components/button/button.md.scss
@@ -250,39 +250,6 @@
 }
 
 
-// Material Design Ripple Effect
-// --------------------------------------------------
-// Only Material uses the button effect, so by default
-// it's display none, and .md sets to display block.
-
-.button-effect {
-  @include border-radius(50%);
-  @include transform-origin(center, center);
-
-  position: absolute;
-  z-index: 0;
-  display: none;
-
-  background-color: $button-md-ripple-background-color;
-  opacity: .2;
-
-  transition-timing-function: ease-in-out;
-
-  pointer-events: none;
-
-  @include multi-dir() {
-    // scss-lint:disable PropertySpelling
-    top: 0;
-
-    left: 0;
-  }
-}
-
-.md .button-effect {
-  display: block;
-}
-
-
 // Generate Material Design Button Colors
 // --------------------------------------------------