diff --git a/ionic/components/button/extensions/material.scss b/ionic/components/button/extensions/material.scss
index cf875c9b89..db246b4fd7 100644
--- a/ionic/components/button/extensions/material.scss
+++ b/ionic/components/button/extensions/material.scss
@@ -43,6 +43,16 @@ $button-material-border-radius:            3px !default;
     font-size: $button-small-icon-size;
   }
 
+  &[outline] {
+    box-shadow: none;
+
+    .md-ripple {
+      &.is-visible {
+        opacity: 0.2;
+      }
+    }
+  }
+
   @each $color, $value in $colors {
 
     &[#{$color}] {
@@ -58,6 +68,23 @@ $button-material-border-radius:            3px !default;
         opacity: 1;
         background-color: get-color($color, base);
       }
+
+      &[outline] {
+        @if lightness(get-color($color, base)) >= 80 {
+          .md-ripple {
+            background-color: black;
+          }
+        } @else {
+          .md-ripple {
+            background-color: get-color($color, base);
+          }
+        }
+        &:active,
+        &.activated {
+          opacity: 1;
+          background: transparent;
+        }
+      }
     }
   }
 }
diff --git a/ionic/components/button/test/outline/main.html b/ionic/components/button/test/outline/main.html
index 4bb8865ce0..e638d7b92b 100644
--- a/ionic/components/button/test/outline/main.html
+++ b/ionic/components/button/test/outline/main.html
@@ -1,42 +1,16 @@
 
 <div>
-  <a button outline primary href="#">a.primary</a>
-  <button outline primary>button.primary</button>
-  <button outline primary class="hover">hover</button>
-  <button outline primary class="activated">activated</button>
+  <button outline primary>Primary</button>
+  <button outline secondary>Secondary</button>
+  <button outline danger>Danger</button>
+  <button outline light>Light</button>
+  <button outline stable>Stable</button>
+  <button outline dark>Dark</button>
 </div>
 
-<div>
-  <a button outline secondary href="#">a.secondary</a>
-  <button outline secondary>button.secondary</button>
-  <button outline secondary class="hover">hover</button>
-  <button outline secondary class="activated">activated</button>
-</div>
-
-<div>
-  <a button outline danger href="#">a.danger</a>
-  <button outline danger>button.danger</button>
-  <button outline danger class="hover">hover</button>
-  <button outline danger class="activated">activated</button>
-</div>
-
-<div>
-  <a button outline light href="#">a.light</a>
-  <button outline light>button.light</button>
-  <button outline light class="hover">hover</button>
-  <button outline light class="activated">activated</button>
-</div>
-
-<div>
-  <a button outline stable href="#">a.stable</a>
-  <button outline stable>button.stable</button>
-  <button outline stable class="hover">hover</button>
-  <button outline stable class="activated">activated</button>
-</div>
-
-<div>
-  <a button outline dark href="#">a.dark</a>
-  <button outline dark>button.dark</button>
-  <button outline dark class="hover">hover</button>
-  <button outline dark class="activated">activated</button>
-</div>
+<style>
+button, [button] {
+  display: block !important;
+  margin: 10px auto 10px auto !important;
+}
+</style>