diff --git a/ionic/components/button/extensions/material.scss b/ionic/components/button/extensions/material.scss
index 0ee8fa8a68..86dc338799 100644
--- a/ionic/components/button/extensions/material.scss
+++ b/ionic/components/button/extensions/material.scss
@@ -43,4 +43,21 @@ $button-material-border-radius:            3px !default;
     font-size: $button-small-icon-size;
   }
 
+  @each $color, $value in $colors {
+
+    &[#{$color}] {
+
+      @if $color != "#fff" {
+        .md-ripple {
+          background-color: white;
+        }
+      }
+
+      &:active,
+      &.activated {
+        opacity: 1;
+        background-color: get-color($color, base);
+      }
+    }
+  }
 }
diff --git a/ionic/components/button/test/basic/main.html b/ionic/components/button/test/basic/main.html
index 0fc92a5f91..ad4a960ba2 100644
--- a/ionic/components/button/test/basic/main.html
+++ b/ionic/components/button/test/basic/main.html
@@ -1,51 +1,30 @@
 
 <div class="padding">
 <div>
-  <a button href="#">a[button]</a>
-  <button>button</button>
-  <button class="hover">hover</button>
-  <button class="activated">activated</button>
+  <button>Default</button>
 </div>
 
 <div>
-  <a button primary href="#">a[primary]</a>
-  <button primary>button[primary]</button>
-  <button primary class="hover">hover</button>
-  <button primary class="activated">activated</button>
+  <button primary>Primary</button>
 </div>
 
 <div>
-  <a button secondary href="#">a[secondary]</a>
-  <button secondary>button[secondary]</button>
-  <button secondary class="hover">hover</button>
-  <button secondary class="activated">activated</button>
+  <button secondary>Secondary</button>
 </div>
 
 <div>
-  <a button danger href="#">a[danger]</a>
-  <button danger>button[danger]</button>
-  <button danger class="hover">hover</button>
-  <button danger class="activated">activated</button>
+  <button danger>Danger</button>
 </div>
 
 <div>
-  <a button light href="#">a[light]</a>
-  <button light>button[light]</button>
-  <button light class="hover">hover</button>
-  <button light class="activated">activated</button>
+  <button light>Light</button>
 </div>
 
 <div>
-  <a button stable href="#">a[stable]</a>
-  <button stable>button[stable]</button>
-  <button stable class="hover">hover</button>
-  <button stable class="activated">activated</button>
+  <button stable>Stable</button>
 </div>
 
 <div>
-  <a button dark href="#">a[dark]</a>
-  <button dark>button[dark]</button>
-  <button dark class="hover">hover</button>
-  <button dark class="activated">activated</button>
+  <button dark>Dark</button>
 </div>
 </div>
diff --git a/ionic/components/material/ripple.scss b/ionic/components/material/ripple.scss
index 1cf6933265..12782f164f 100644
--- a/ionic/components/material/ripple.scss
+++ b/ionic/components/material/ripple.scss
@@ -7,8 +7,7 @@ $ripple-bg-color: black;
 $ripple-animation-curve: cubic-bezier(0, 0, 0.2, 1) !default;
 
 .md-ripple {
-
-  background: #fff;//$ripple-bg-color;
+  background: $ripple-bg-color;
   border-radius: 50%;
   height: 50px;
   left: 0;
diff --git a/ionic/components/material/ripple.ts b/ionic/components/material/ripple.ts
index 3aebb80ffa..7a832888e1 100644
--- a/ionic/components/material/ripple.ts
+++ b/ionic/components/material/ripple.ts
@@ -117,7 +117,9 @@ export class MaterialRippleEffect {
 
     // Don't fire for the artificial "mouseup" generated by a double-click.
     if (event && event.detail !== 2) {
-      this.rippleElement.classList.remove('is-visible');
+      setTimeout(() => {
+        this.rippleElement.classList.remove('is-visible');
+      })
     }
   }