let me see that button ripple

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);
+      }
+    }
+  }
 }

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>