diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index a59e06870f..84757d32dc 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -50,27 +50,20 @@ $button-bar-button-icon-size:     20px !default;
   }
 }
 
-@mixin button-clear($color, $font-size:"") {
+@mixin button-clear($color) {
   &.button-clear {
     border-color: transparent;
     background: none;
     box-shadow: none;
     color: $color;
-
-    @if $font-size != "" {
-      font-size: $font-size;
-    }
   }
 }
 
-@mixin button-outline($color, $text-color:"") {
+@mixin button-outline($color) {
   &.button-outline {
     border-color: $color;
     background: transparent;
-    @if $text-color == "" {
-      $text-color: $color;
-    }
-    color: $text-color;
+    color: $color;
 
     &.activated {
       background-color: $color;
@@ -91,6 +84,10 @@ $button-bar-button-icon-size:     20px !default;
                             inverse-tone($color),
                             get-color($color, dark),
                             get-color($color, inverse));
+
+    @include button-clear(get-color($color, dark));
+
+    @include button-outline(get-color($color, dark));
   }
 }
 
diff --git a/src/components/button/examples/button-clear/index.html b/src/components/button/examples/button-clear/index.html
new file mode 100644
index 0000000000..9531975ecb
--- /dev/null
+++ b/src/components/button/examples/button-clear/index.html
@@ -0,0 +1,46 @@
+<link rel="stylesheet" href="../../../../../dist/css/ionic.css">
+
+<style>
+  [ion-app] {
+    display: block;
+  }
+</style>
+
+<div ion-app>
+
+  <p>
+    <a class="button button-clear button-light" href="#">a.light</a>
+    <button class="button button-clear button-light">button.light</button>
+    <button class="button button-clear button-light hover">hover</button>
+    <button class="button button-clear button-light activated">activated</button>
+  </p>
+
+  <p>
+    <a class="button button-clear button-stable" href="#">a.stable</a>
+    <button class="button button-clear button-stable">button.stable</button>
+    <button class="button button-clear button-stable hover">hover</button>
+    <button class="button button-clear button-stable activated">activated</button>
+  </p>
+
+  <p>
+    <a class="button button-clear button-positive" href="#">a.positive</a>
+    <button class="button button-clear button-positive">button.positive</button>
+    <button class="button button-clear button-positive hover">hover</button>
+    <button class="button button-clear button-positive activated">activated</button>
+  </p>
+
+  <p>
+    <a class="button button-clear button-assertive" href="#">a.assertive</a>
+    <button class="button button-clear button-assertive">button.assertive</button>
+    <button class="button button-clear button-assertive hover">hover</button>
+    <button class="button button-clear button-assertive activated">activated</button>
+  </p>
+
+  <p>
+    <a class="button button-clear button-dark" href="#">a.dark</a>
+    <button class="button button-clear button-dark">button.dark</button>
+    <button class="button button-clear button-dark hover">hover</button>
+    <button class="button button-clear button-dark activated">activated</button>
+  </p>
+
+</div>
diff --git a/src/components/button/examples/button-outline/index.html b/src/components/button/examples/button-outline/index.html
new file mode 100644
index 0000000000..b6ae1255c2
--- /dev/null
+++ b/src/components/button/examples/button-outline/index.html
@@ -0,0 +1,46 @@
+<link rel="stylesheet" href="../../../../../dist/css/ionic.css">
+
+<style>
+  [ion-app] {
+    display: block;
+  }
+</style>
+
+<div ion-app>
+
+  <p>
+    <a class="button button-outline button-light" href="#">a.light</a>
+    <button class="button button-outline button-light">button.light</button>
+    <button class="button button-outline button-light hover">hover</button>
+    <button class="button button-outline button-light activated">activated</button>
+  </p>
+
+  <p>
+    <a class="button button-outline button-stable" href="#">a.stable</a>
+    <button class="button button-outline button-stable">button.stable</button>
+    <button class="button button-outline button-stable hover">hover</button>
+    <button class="button button-outline button-stable activated">activated</button>
+  </p>
+
+  <p>
+    <a class="button button-outline button-positive" href="#">a.positive</a>
+    <button class="button button-outline button-positive">button.positive</button>
+    <button class="button button-outline button-positive hover">hover</button>
+    <button class="button button-outline button-positive activated">activated</button>
+  </p>
+
+  <p>
+    <a class="button button-outline button-assertive" href="#">a.assertive</a>
+    <button class="button button-outline button-assertive">button.assertive</button>
+    <button class="button button-outline button-assertive hover">hover</button>
+    <button class="button button-outline button-assertive activated">activated</button>
+  </p>
+
+  <p>
+    <a class="button button-outline button-dark" href="#">a.dark</a>
+    <button class="button button-outline button-dark">button.dark</button>
+    <button class="button button-outline button-dark hover">hover</button>
+    <button class="button button-outline button-dark activated">activated</button>
+  </p>
+
+</div>