diff --git a/ionic/components/button/extensions/material.scss b/ionic/components/button/extensions/material.scss
index db246b4fd7..cc7efb8435 100644
--- a/ionic/components/button/extensions/material.scss
+++ b/ionic/components/button/extensions/material.scss
@@ -85,6 +85,16 @@ $button-material-border-radius:            3px !default;
           background: transparent;
         }
       }
+
+      &[clear] {
+        box-shadow: none;
+        &:hover, &.hover {
+          background-color: rgba(158, 158, 158, 0.2);
+        }
+        &:active, &.active {
+          background-color: rgba(158, 158, 158, 0.4);
+        }
+      }
     }
   }
 }
diff --git a/ionic/components/button/test/clear/main.html b/ionic/components/button/test/clear/main.html
index 1279dbf1f8..1c3b6417b4 100644
--- a/ionic/components/button/test/clear/main.html
+++ b/ionic/components/button/test/clear/main.html
@@ -1,49 +1,15 @@
-
 <div>
-  <a button clear href="#">a[button][clear]</a>
-  <button clear>button[clear]</button>
-  <button clear class="hover">hover</button>
-  <button clear class="activated">activated</button>
+  <button clear primary>Primary</button>
+  <button clear secondary>Secondary</button>
+  <button clear danger>Danger</button>
+  <button clear light>Light</button>
+  <button clear stable>Stable</button>
+  <button clear dark>Dark</button>
 </div>
 
-<div>
-  <a button clear primary href="#">a.primary</a>
-  <button clear primary>button.primary</button>
-  <button clear primary class="hover">hover</button>
-  <button clear primary class="activated">activated</button>
-</div>
-
-<div>
-  <a button clear secondary href="#">a.secondary</a>
-  <button clear secondary>button.secondary</button>
-  <button clear secondary class="hover">hover</button>
-  <button clear secondary class="activated">activated</button>
-</div>
-
-<div>
-  <a button clear danger href="#">a.danger</a>
-  <button clear danger>button.danger</button>
-  <button clear danger class="hover">hover</button>
-  <button clear danger class="activated">activated</button>
-</div>
-
-<div>
-  <a button clear light href="#">a.light</a>
-  <button clear light>button.light</button>
-  <button clear light class="hover">hover</button>
-  <button clear light class="activated">activated</button>
-</div>
-
-<div>
-  <a button clear stable href="#">a.stable</a>
-  <button clear stable>button.stable</button>
-  <button clear stable class="hover">hover</button>
-  <button clear stable class="activated">activated</button>
-</div>
-
-<div>
-  <a button clear dark href="#">a.dark</a>
-  <button clear dark>button.dark</button>
-  <button clear dark class="hover">hover</button>
-  <button clear dark class="activated">activated</button>
-</div>
+<style>
+button, [button] {
+  display: block !important;
+  margin: 10px auto 10px auto !important;
+}
+</style>