diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index e1ac29355a..5134341f41 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -551,17 +551,17 @@ a.subdued‎ {
   height: 44px;
   border-width: 0;
   border-style: solid;
-  background-color: white;
   border-top: 1px solid transparent;
-  border-bottom: 1px solid #dddddd; }
+  border-bottom: 1px solid #dddddd;
+  background-color: white; }
   @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
     .bar {
       border-top: none;
       border-bottom: none;
       background-image: linear-gradient(0deg, #dddddd, #dddddd, 50%, transparent 50%);
+      background-position: bottom;
       background-size: 100% 1px;
-      background-repeat: no-repeat;
-      background-position: bottom; } }
+      background-repeat: no-repeat; } }
   .bar.bar-clear {
     border: none;
     background: none;
@@ -705,19 +705,20 @@ a.subdued‎ {
     line-height: 44px; }
   .bar .title a {
     color: inherit; }
-  .bar .button {
+  .bar > .button {
     box-flex: 1;
     -webkit-box-flex: 0;
     -moz-box-flex: 0;
     z-index: 1;
     margin: 0;
-    padding: 4px 12px;
+    padding: 2px 8px 0 8px;
+    min-height: 34px;
     background-color: transparent;
     font-size: 12px;
-    line-height: 23px; }
-    .bar .button.button-clear {
-      padding: 0 5px;
-      line-height: 34px; }
+    line-height: 28px; }
+    .bar > .button [class^="icon-"],
+    .bar > .button [class*=" icon-"] {
+      margin-top: 1px; }
   .bar .button-bar {
     line-height: 18px; }
   .bar .button-bar + .button, .bar .button + .button-bar {
@@ -867,14 +868,6 @@ a.subdued‎ {
     box-shadow: none;
     font-size: 17px; }
 
-.bar [class^="icon-"],
-.bar [class*=" icon-"] {
-  font-size: 24px; }
-
-.bar .button-icon {
-  border: 1px solid transparent;
-  background-color: transparent; }
-
 .bar-header {
   top: 0; }
 
@@ -1885,21 +1878,31 @@ input[type="range"] {
   position: relative;
   display: inline-block;
   margin: 0;
-  padding: 8px 12px;
+  padding: 9px 12px 7px 12px;
+  min-height: 44px;
   border-width: 1px;
   border-style: solid;
   border-radius: 2px;
   color: #222222;
-  vertical-align: middle;
+  vertical-align: top;
   text-align: center;
-  font-size: 16px;
-  line-height: 20px;
   text-overflow: ellipsis;
+  font-size: 16px;
+  line-height: 24px;
   cursor: pointer; }
+  .button [class^="icon-"],
+  .button [class*=" icon-"] {
+    display: inline-block;
+    padding: 0;
+    vertical-align: sub;
+    font-size: 24px;
+    line-height: 24px; }
   .button.button-icon {
     padding: 4px 5px;
-    border: none;
     background: none; }
+    .button.button-icon [class^="icon-"],
+    .button.button-icon [class*=" icon-"] {
+      font-size: 32px; }
   .button.button-clear {
     -webkit-transition: opacity 0.1s;
     transition: opacity 0.1s;
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index 25c3c5d41b..3fc8df67a6 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -1317,17 +1317,17 @@
     height: 44px;
     border-width: 0;
     border-style: solid;
-    background-color: white;
     border-top: 1px solid transparent;
-    border-bottom: 1px solid #dddddd; }
+    border-bottom: 1px solid #dddddd;
+    background-color: white; }
     @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
       .ionic .bar {
         border-top: none;
         border-bottom: none;
         background-image: linear-gradient(0deg, #dddddd, #dddddd, 50%, transparent 50%);
+        background-position: bottom;
         background-size: 100% 1px;
-        background-repeat: no-repeat;
-        background-position: bottom; } }
+        background-repeat: no-repeat; } }
     .ionic .bar.bar-clear {
       border: none;
       background: none;
@@ -1471,19 +1471,20 @@
       line-height: 44px; }
     .ionic .bar .title a {
       color: inherit; }
-    .ionic .bar .button {
+    .ionic .bar > .button {
       box-flex: 1;
       -webkit-box-flex: 0;
       -moz-box-flex: 0;
       z-index: 1;
       margin: 0;
-      padding: 4px 12px;
+      padding: 2px 8px 0 8px;
+      min-height: 34px;
       background-color: transparent;
       font-size: 12px;
-      line-height: 23px; }
-      .ionic .bar .button.button-clear {
-        padding: 0 5px;
-        line-height: 34px; }
+      line-height: 28px; }
+      .ionic .bar > .button [class^="icon-"],
+      .ionic .bar > .button [class*=" icon-"] {
+        margin-top: 1px; }
     .ionic .bar .button-bar {
       line-height: 18px; }
     .ionic .bar .button-bar + .button, .ionic .bar .button + .button-bar {
@@ -1624,12 +1625,6 @@
       background: none;
       box-shadow: none;
       font-size: 17px; }
-  .ionic .bar [class^="icon-"],
-  .ionic .bar [class*=" icon-"] {
-    font-size: 24px; }
-  .ionic .bar .button-icon {
-    border: 1px solid transparent;
-    background-color: transparent; }
   .ionic .bar-header {
     top: 0; }
   .ionic .bar-footer {
@@ -2583,21 +2578,31 @@
     position: relative;
     display: inline-block;
     margin: 0;
-    padding: 8px 12px;
+    padding: 9px 12px 7px 12px;
+    min-height: 44px;
     border-width: 1px;
     border-style: solid;
     border-radius: 2px;
     color: #222222;
-    vertical-align: middle;
+    vertical-align: top;
     text-align: center;
-    font-size: 16px;
-    line-height: 20px;
     text-overflow: ellipsis;
+    font-size: 16px;
+    line-height: 24px;
     cursor: pointer; }
+    .ionic .button [class^="icon-"],
+    .ionic .button [class*=" icon-"] {
+      display: inline-block;
+      padding: 0;
+      vertical-align: sub;
+      font-size: 24px;
+      line-height: 24px; }
     .ionic .button.button-icon {
       padding: 4px 5px;
-      border: none;
       background: none; }
+      .ionic .button.button-icon [class^="icon-"],
+      .ionic .button.button-icon [class*=" icon-"] {
+        font-size: 32px; }
     .ionic .button.button-clear {
       -webkit-transition: opacity 0.1s;
       transition: opacity 0.1s;
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index b0bda1a4d7..32aa232667 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -1660,17 +1660,17 @@ a.subdued‎ {
   height: 44px;
   border-width: 0;
   border-style: solid;
-  background-color: white;
   border-top: 1px solid transparent;
-  border-bottom: 1px solid #dddddd; }
+  border-bottom: 1px solid #dddddd;
+  background-color: white; }
   @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
     .bar {
       border-top: none;
       border-bottom: none;
       background-image: linear-gradient(0deg, #dddddd, #dddddd, 50%, transparent 50%);
+      background-position: bottom;
       background-size: 100% 1px;
-      background-repeat: no-repeat;
-      background-position: bottom; } }
+      background-repeat: no-repeat; } }
   .bar.bar-clear {
     border: none;
     background: none;
@@ -1814,19 +1814,20 @@ a.subdued‎ {
     line-height: 44px; }
   .bar .title a {
     color: inherit; }
-  .bar .button {
+  .bar > .button {
     box-flex: 1;
     -webkit-box-flex: 0;
     -moz-box-flex: 0;
     z-index: 1;
     margin: 0;
-    padding: 4px 12px;
+    padding: 2px 8px 0 8px;
+    min-height: 34px;
     background-color: transparent;
     font-size: 12px;
-    line-height: 23px; }
-    .bar .button.button-clear {
-      padding: 0 5px;
-      line-height: 34px; }
+    line-height: 28px; }
+    .bar > .button [class^="icon-"],
+    .bar > .button [class*=" icon-"] {
+      margin-top: 1px; }
   .bar .button-bar {
     line-height: 18px; }
   .bar .button-bar + .button, .bar .button + .button-bar {
@@ -1976,14 +1977,6 @@ a.subdued‎ {
     box-shadow: none;
     font-size: 17px; }
 
-.bar [class^="icon-"],
-.bar [class*=" icon-"] {
-  font-size: 24px; }
-
-.bar .button-icon {
-  border: 1px solid transparent;
-  background-color: transparent; }
-
 .bar-header {
   top: 0; }
 
@@ -3106,21 +3099,31 @@ input[type="range"] {
   position: relative;
   display: inline-block;
   margin: 0;
-  padding: 8px 12px;
+  padding: 9px 12px 7px 12px;
+  min-height: 44px;
   border-width: 1px;
   border-style: solid;
   border-radius: 2px;
   color: #222222;
-  vertical-align: middle;
+  vertical-align: top;
   text-align: center;
-  font-size: 16px;
-  line-height: 20px;
   text-overflow: ellipsis;
+  font-size: 16px;
+  line-height: 24px;
   cursor: pointer; }
+  .button [class^="icon-"],
+  .button [class*=" icon-"] {
+    display: inline-block;
+    padding: 0;
+    vertical-align: sub;
+    font-size: 24px;
+    line-height: 24px; }
   .button.button-icon {
     padding: 4px 5px;
-    border: none;
     background: none; }
+    .button.button-icon [class^="icon-"],
+    .button.button-icon [class*=" icon-"] {
+      font-size: 32px; }
   .button.button-clear {
     -webkit-transition: opacity 0.1s;
     transition: opacity 0.1s;
diff --git a/scss/ionic/_bar.scss b/scss/ionic/_bar.scss
index 0c26064692..1b66fc8766 100644
--- a/scss/ionic/_bar.scss
+++ b/scss/ionic/_bar.scss
@@ -18,24 +18,24 @@
   height: $bar-height;
   border-width: 0;
   border-style: solid;
-
-  background-color: $bar-bg;
   border-top: 1px solid transparent;
   border-bottom: 1px solid $bar-default-border-color;
+
+  background-color: $bar-bg;
   @media (min--moz-device-pixel-ratio: 1.5),
          (-webkit-min-device-pixel-ratio: 1.5),
          (min-device-pixel-ratio: 1.5),
          (min-resolution: 144dpi),
          (min-resolution: 1.5dppx) {
 
-  border-top: none;
-  border-bottom: none;
-  background-image: linear-gradient(0deg, $bar-default-border-color, $bar-default-border-color, 50%, transparent 50%);
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-  background-position: bottom;
+    border-top: none;
+    border-bottom: none;
+    background-image: linear-gradient(0deg, $bar-default-border-color, $bar-default-border-color, 50%, transparent 50%);
+    background-position: bottom;
+    background-size: 100% 1px;
+    background-repeat: no-repeat;
 
- }
+   }
 
   &.bar-clear {
     border: none;
@@ -109,22 +109,22 @@
     color: inherit;
   }
 
-  .button {
+  > .button {
     @include box-flex(0);
     z-index: 1;
     margin: 0;
-    padding: 4px 12px;
+    padding: 2px 8px 0 8px;
+    min-height: 34px;
     background-color: transparent;
     font-size: 12px;
-    line-height: $bar-button-line-height;
+    line-height: 28px;
 
-    &.button-clear {
-      padding: 0 5px;
-      line-height: $bar-button-clear-line-height;
+    [class^="icon-"], 
+    [class*=" icon-"] {
+      margin-top: 1px;
     }
   }
 
-
   .button-bar {
     line-height: $bar-button-bar-line-height;
   }
@@ -200,16 +200,6 @@
   }
 }
 
-.bar [class^="icon-"], 
-.bar [class*=" icon-"] {
-  font-size: 24px;
-}
-
-.bar .button-icon {
-  border: $button-border-width solid transparent;
-  background-color: transparent;
-}
-
 // Header at top
 .bar-header {
   top: 0;
diff --git a/scss/ionic/_button.scss b/scss/ionic/_button.scss
index c7f13448b6..bca9fb733e 100644
--- a/scss/ionic/_button.scss
+++ b/scss/ionic/_button.scss
@@ -1,31 +1,43 @@
 .button {
   position: relative;
   display: inline-block;
-
   margin: 0;
 
-  padding: $button-padding;
+  padding: 9px 12px 7px 12px;
+  min-height: 44px;
 
   border-width: $button-border-width;
   border-style: solid;
   border-radius: $button-border-radius;
 
   color: $button-color;
-
-  vertical-align: middle;
+  vertical-align: top;
 
   text-align: center;
-  font-size: $button-font-size;
-  line-height: $line-height-computed;
 
   text-overflow: ellipsis;
+  font-size: $button-font-size;
+  line-height: 24px;
 
   cursor: pointer;
 
+  [class^="icon-"], 
+  [class*=" icon-"] {
+    display: inline-block;
+    padding: 0;
+    vertical-align: sub;
+    font-size: 24px;
+    line-height: 24px;
+  }
+
   &.button-icon {
     padding: $button-clear-padding;
-    border: none;
     background: none;
+
+    [class^="icon-"], 
+    [class*=" icon-"] {
+      font-size: 32px;
+    }
   }
 
   &.button-clear {
@@ -102,6 +114,7 @@
     margin-bottom: $button-block-margin;
   }
 
+
 }
 
 .padding > .button.block:first-child {
diff --git a/scss/ionic/_mixins.scss b/scss/ionic/_mixins.scss
index 9237297981..341615ae81 100644
--- a/scss/ionic/_mixins.scss
+++ b/scss/ionic/_mixins.scss
@@ -401,7 +401,7 @@
   display: flex;
 }
 
-@mixin dislay-inline {
+@mixin dislay-inline-flex {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -moz-inline-flex;
diff --git a/test/buttons.html b/test/buttons.html
index 63f6ccf2d5..e70daeaa67 100644
--- a/test/buttons.html
+++ b/test/buttons.html
@@ -24,212 +24,41 @@
       <h1 class="title">Buttons</h1>
     </header>
 
-    <div class="content-wrapper">
-      <main class="content has-header">
+    <main class="content has-header">
 
-        <div class="padding">
+      <div class="padding">
 
-          <h3>&lt;a&gt; default</h3>
-          <p>
-            <a class="button button-default">.button-default</a>
-            <a class="button button-secondary">.button-secondary</a>
-            <a class="button button-primary">.button-primary</a>
-            <a class="button button-info">.button-info</a>
-            <a class="button button-success">.button-success</a>
-            <a class="button button-warning">.button-warning</a>
-            <a class="button button-danger">.button-danger</a>
-            <a class="button button-dark">.button-dark</a>
-          </p>
-
-          <hr>
-
-          <h3>&lt;button&gt; default</h3>
-          <p>
-            <button class="button button-default">.button-default</button>
-            <button class="button button-secondary">.button-secondary</button>
-            <button class="button button-primary">.button-primary</button>
-            <button class="button button-info">.button-info</button>
-            <button class="button button-success">.button-success</button>
-            <button class="button button-warning">.button-warning</button>
-            <button class="button button-danger">.button-danger</button>
-            <button class="button button-dark">.button-dark</button>
-          </p>
-
-          <hr>
-
-          <h3>a.block (parent w/ padding)</h3>
-          <p>
-            <a class="button block button-default">.button-default</a>
-            <a class="button block button-secondary">.button-secondary</a>
-            <a class="button block button-primary">.button-primary</a>
-            <a class="button block button-info">.button-info</a>
-            <a class="button block button-success">.button-success</a>
-            <a class="button block button-warning">.button-warning</a>
-            <a class="button block button-danger">.button-danger</a>
-            <a class="button block button-dark">.button-dark</a>
-          </p>
-
-          <hr>
-
-          <h3>button.block (parent w/ padding)</h3>
-          <p>
-            <button class="button block button-default">.button-default</button>
-            <button class="button block button-secondary">.button-secondary</button>
-            <button class="button block button-primary">.button-primary</button>
-            <button class="button block button-info">.button-info</button>
-            <button class="button block button-success">.button-success</button>
-            <button class="button block button-warning">.button-warning</button>
-            <button class="button block button-danger">.button-danger</button>
-            <button class="button block button-dark">.button-dark</button>
-          </p>
-
-          <hr>
-
-          <h3>a.button-icon</h3>
-          <p>
-            <a class="button button-icon"><i class="icon-home"></i></a>
-          </p>
-
-          <hr>
-
-          <h3>button.button-icon</h3>
-          <p>
-            <button class="button button-icon"><i class="icon-home"></i></button>
-          </p>
-
-          <hr>
-
-          <h3>a.block.button-icon</h3>
-          <p>
-            <a class="button block button-icon"><i class="icon-home"></i></a>
-          </p>
-
-          <hr>
-
-          <h3>button.block.button-icon</h3>
-          <p>
-            <button class="button block button-icon"><i class="icon-home"></i></button>
-          </p>
-
-          <hr>
-
-          <h3>a.button-outline</h3>
-          <p>
-            <a class="button button-default button-outline">.button-default</a>
-            <a class="button button-secondary button-outline">.button-secondary</a>
-            <a class="button button-primary button-outline">.button-primary</a>
-            <a class="button button-info button-outline">.button-info</a>
-            <a class="button button-success button-outline">.button-success</a>
-            <a class="button button-warning button-outline">.button-warning</a>
-            <a class="button button-danger button-outline">.button-danger</a>
-            <a class="button button-dark button-outline">.button-dark</a>
-          </p>
-
-          <hr>
-
-          <h3>button.button-outline</h3>
-          <p>
-            <button class="button button-default button-outline">.button-default</button>
-            <button class="button button-secondary button-outline">.button-secondary</button>
-            <button class="button button-primary button-outline">.button-primary</button>
-            <button class="button button-info button-outline">.button-info</button>
-            <button class="button button-success button-outline">.button-success</button>
-            <button class="button button-warning button-outline">.button-warning</button>
-            <button class="button button-danger button-outline">.button-danger</button>
-            <button class="button button-dark button-outline">.button-dark</button>
-          </p>
-
-          <hr>
-
-          <h3>a.block.button-outline (parent w/ padding)</h3>
-          <p>
-            <a class="button button-default button-outline block">.button-default</a>
-            <a class="button button-secondary button-outline block">.button-secondary</a>
-            <a class="button button-primary button-outline block">.button-primary</a>
-            <a class="button button-info button-outline block">.button-info</a>
-            <a class="button button-success button-outline block">.button-success</a>
-            <a class="button button-warning button-outline block">.button-warning</a>
-            <a class="button button-danger button-outline block">.button-danger</a>
-            <a class="button button-dark button-outline block">.button-dark</a>
-          </p>
-
-          <hr>
-
-          <h3>button.block.button-outline (parent w/ padding)</h3>
-          <p>
-            <button class="button button-default button-outline block">.button-default</button>
-            <button class="button button-secondary button-outline block">.button-secondary</button>
-            <button class="button button-primary button-outline block">.button-primary</button>
-            <button class="button button-info button-outline block">.button-info</button>
-            <button class="button button-success button-outline block">.button-success</button>
-            <button class="button button-warning button-outline block">.button-warning</button>
-            <button class="button button-danger button-outline block">.button-danger</button>
-            <button class="button button-dark button-outline block">.button-dark</button>
-          </p>
-
-          <hr>
-
-          <h3>a.button-clear</h3>
-          <p>
-            <a class="button button-default button-clear">.button-default</a>
-            <a class="button button-secondary button-clear">.button-secondary</a>
-            <a class="button button-primary button-clear">.button-primary</a>
-            <a class="button button-info button-clear">.button-info</a>
-            <a class="button button-success button-clear">.button-success</a>
-            <a class="button button-warning button-clear">.button-warning</a>
-            <a class="button button-danger button-clear">.button-danger</a>
-            <a class="button button-dark button-clear">.button-dark</a>
-          </p>
-
-          <hr>
-
-          <h3>button.button-clear</h3>
-          <p>
-            <button class="button button-default button-clear">.button-default</button>
-            <button class="button button-secondary button-clear">.button-secondary</button>
-            <button class="button button-primary button-clear">.button-primary</button>
-            <button class="button button-info button-clear">.button-info</button>
-            <button class="button button-success button-clear">.button-success</button>
-            <button class="button button-warning button-clear">.button-warning</button>
-            <button class="button button-danger button-clear">.button-danger</button>
-            <button class="button button-dark button-clear">.button-dark</button>
-          </p>
-
-          <hr>
-
-          <h3>a.block.button-clear (parent w/ padding)</h3>
-          <p>
-            <a class="button button-default button-clear block">.button-default</a>
-            <a class="button button-secondary button-clear block">.button-secondary</a>
-            <a class="button button-primary button-clear block">.button-primary</a>
-            <a class="button button-info button-clear block">.button-info</a>
-            <a class="button button-success button-clear block">.button-success</a>
-            <a class="button button-warning button-clear block">.button-warning</a>
-            <a class="button button-danger button-clear block">.button-danger</a>
-            <a class="button button-dark button-clear block">.button-dark</a>
-          </p>
-
-          <hr>
-
-          <h3>button.block.button-clear (parent w/ padding)</h3>
-          <p>
-            <button class="button button-default button-clear block">.button-default</button>
-            <button class="button button-secondary button-clear block">.button-secondary</button>
-            <button class="button button-primary button-clear block">.button-primary</button>
-            <button class="button button-info button-clear block">.button-info</button>
-            <button class="button button-success button-clear block">.button-success</button>
-            <button class="button button-warning button-clear block">.button-warning</button>
-            <button class="button button-danger button-clear block">.button-danger</button>
-            <button class="button button-dark button-clear block">.button-dark</button>
-          </p>
-
-        </div>
+        <h3>&lt;a&gt; default</h3>
+        <p>
+          <a class="button button-default"><i class="icon-home"></i> .button-default</a>
+          <a class="button button-secondary"><i class="icon-home"></i></a>
+          <a class="button button-primary"><i class="icon-home"></i> .button-primary</a>
+          <a class="button button-info"><i class="icon-home"></i></a>
+          <a class="button button-success">.button-success</a>
+          <a class="button button-warning"><i class="icon-home"></i> .button-warning</a>
+          <a class="button button-danger">.button-danger</a>
+          <a class="button button-dark"><i class="icon-home"></i> .button-dark</a>
+        </p>
 
         <hr>
 
-        <h3>a.block (parent w/out padding)</h3>
+        <h3>&lt;button&gt; default</h3>
         <p>
-          <a class="button block button-default">.button-default</a>
+          <button class="button button-default"><i class="icon-home"></i> .button-default</button>
+          <button class="button button-secondary">.button-secondary</button>
+          <button class="button button-primary"><i class="icon-home"></i> .button-primary</button>
+          <button class="button button-info">.button-info</button>
+          <button class="button button-success"><i class="icon-home"></i></button>
+          <button class="button button-warning">.button-warning</button>
+          <button class="button button-danger"><i class="icon-home"></i> .button-danger</button>
+          <button class="button button-dark"><i class="icon-home"></i></button>
+        </p>
+
+        <hr>
+
+        <h3>a.block (parent w/ padding)</h3>
+        <p>
+          <a class="button block button-default"><i class="icon-home"></i> .button-default</a>
           <a class="button block button-secondary">.button-secondary</a>
           <a class="button block button-primary">.button-primary</a>
           <a class="button block button-info">.button-info</a>
@@ -241,40 +70,209 @@
 
         <hr>
 
-        <h3>a.block (.button-full on the parent)</h3>
-        <p class="button-full">
-          <a class="button button-default">.button-default</a>
-          <a class="button button-secondary">.button-secondary</a>
-          <a class="button button-primary">.button-primary</a>
-          <a class="button button-info">.button-info</a>
-          <a class="button button-success">.button-success</a>
-          <a class="button button-warning">.button-warning</a>
-          <a class="button button-danger">.button-danger</a>
-          <a class="button button-dark">.button-dark</a>
+        <h3>button.block (parent w/ padding)</h3>
+        <p>
+          <button class="button block button-default"><i class="icon-home"></i> .button-default</button>
+          <button class="button block button-secondary">.button-secondary</button>
+          <button class="button block button-primary">.button-primary</button>
+          <button class="button block button-info">.button-info</button>
+          <button class="button block button-success">.button-success</button>
+          <button class="button block button-warning">.button-warning</button>
+          <button class="button block button-danger">.button-danger</button>
+          <button class="button block button-dark">.button-dark</button>
         </p>
 
         <hr>
 
-        <h3>button.block.button-full on each button and nothing on the parent</h3>
+        <h3>a.button-icon (Borderless, 32px)</h3>
         <p>
-          <button class="button button-full button-default">.button-default</button>
-          <button class="button button-full button-secondary">.button-secondary</button>
-          <button class="button button-full button-primary">.button-primary</button>
-          <button class="button button-full button-info">.button-info</button>
-          <button class="button button-full button-success">.button-success</button>
-          <button class="button button-full button-warning">.button-warning</button>
-          <button class="button button-full button-danger">.button-danger</button>
-          <button class="button button-full button-dark">.button-dark</button>
+          <a class="button button-icon"><i class="icon-home"></i></a>
         </p>
 
         <hr>
 
+        <h3>button.button-icon (Borderless, 32px)</h3>
         <p>
-          <a class="button button-secondary" href="index.html">Homepage</a>
+          <button class="button button-icon"><i class="icon-home"></i></button>
         </p>
 
-      </main>
-    </div>
+        <hr>
+
+        <h3>a.block.button-icon (Borderless, 32px)</h3>
+        <p>
+          <a class="button block button-icon"><i class="icon-home"></i></a>
+        </p>
+
+        <hr>
+
+        <h3>button.block.button-icon (Borderless, 32px)</h3>
+        <p>
+          <button class="button block button-icon"><i class="icon-home"></i></button>
+        </p>
+
+        <hr>
+
+        <h3>a.button-outline</h3>
+        <p>
+          <a class="button button-default button-outline"><i class="icon-home"></i> .button-default</a>
+          <a class="button button-secondary button-outline">.button-secondary</a>
+          <a class="button button-primary button-outline">.button-primary</a>
+          <a class="button button-info button-outline">.button-info</a>
+          <a class="button button-success button-outline">.button-success</a>
+          <a class="button button-warning button-outline">.button-warning</a>
+          <a class="button button-danger button-outline">.button-danger</a>
+          <a class="button button-dark button-outline">.button-dark</a>
+        </p>
+
+        <hr>
+
+        <h3>button.button-outline</h3>
+        <p>
+          <button class="button button-default button-outline"><i class="icon-home"></i> .button-default</button>
+          <button class="button button-secondary button-outline">.button-secondary</button>
+          <button class="button button-primary button-outline">.button-primary</button>
+          <button class="button button-info button-outline">.button-info</button>
+          <button class="button button-success button-outline">.button-success</button>
+          <button class="button button-warning button-outline">.button-warning</button>
+          <button class="button button-danger button-outline">.button-danger</button>
+          <button class="button button-dark button-outline">.button-dark</button>
+        </p>
+
+        <hr>
+
+        <h3>a.block.button-outline (parent w/ padding)</h3>
+        <p>
+          <a class="button button-default button-outline block"><i class="icon-home"></i> .button-default</a>
+          <a class="button button-secondary button-outline block">.button-secondary</a>
+          <a class="button button-primary button-outline block">.button-primary</a>
+          <a class="button button-info button-outline block">.button-info</a>
+          <a class="button button-success button-outline block">.button-success</a>
+          <a class="button button-warning button-outline block">.button-warning</a>
+          <a class="button button-danger button-outline block">.button-danger</a>
+          <a class="button button-dark button-outline block">.button-dark</a>
+        </p>
+
+        <hr>
+
+        <h3>button.block.button-outline (parent w/ padding)</h3>
+        <p>
+          <button class="button button-default button-outline block"><i class="icon-home"></i> .button-default</button>
+          <button class="button button-secondary button-outline block">.button-secondary</button>
+          <button class="button button-primary button-outline block">.button-primary</button>
+          <button class="button button-info button-outline block">.button-info</button>
+          <button class="button button-success button-outline block">.button-success</button>
+          <button class="button button-warning button-outline block">.button-warning</button>
+          <button class="button button-danger button-outline block">.button-danger</button>
+          <button class="button button-dark button-outline block">.button-dark</button>
+        </p>
+
+        <hr>
+
+        <h3>a.button-clear</h3>
+        <p>
+          <a class="button button-default button-clear"><i class="icon-home"></i> .button-default</a>
+          <a class="button button-secondary button-clear">.button-secondary</a>
+          <a class="button button-primary button-clear">.button-primary</a>
+          <a class="button button-info button-clear">.button-info</a>
+          <a class="button button-success button-clear">.button-success</a>
+          <a class="button button-warning button-clear">.button-warning</a>
+          <a class="button button-danger button-clear">.button-danger</a>
+          <a class="button button-dark button-clear">.button-dark</a>
+        </p>
+
+        <hr>
+
+        <h3>button.button-clear</h3>
+        <p>
+          <button class="button button-default button-clear"><i class="icon-home"></i> .button-default</button>
+          <button class="button button-secondary button-clear">.button-secondary</button>
+          <button class="button button-primary button-clear">.button-primary</button>
+          <button class="button button-info button-clear">.button-info</button>
+          <button class="button button-success button-clear">.button-success</button>
+          <button class="button button-warning button-clear">.button-warning</button>
+          <button class="button button-danger button-clear">.button-danger</button>
+          <button class="button button-dark button-clear">.button-dark</button>
+        </p>
+
+        <hr>
+
+        <h3>a.block.button-clear (parent w/ padding)</h3>
+        <p>
+          <a class="button button-default button-clear block"><i class="icon-home"></i> .button-default</a>
+          <a class="button button-secondary button-clear block">.button-secondary</a>
+          <a class="button button-primary button-clear block">.button-primary</a>
+          <a class="button button-info button-clear block">.button-info</a>
+          <a class="button button-success button-clear block">.button-success</a>
+          <a class="button button-warning button-clear block">.button-warning</a>
+          <a class="button button-danger button-clear block">.button-danger</a>
+          <a class="button button-dark button-clear block">.button-dark</a>
+        </p>
+
+        <hr>
+
+        <h3>button.block.button-clear (parent w/ padding)</h3>
+        <p>
+          <button class="button button-default button-clear block"><i class="icon-home"></i> .button-default</button>
+          <button class="button button-secondary button-clear block">.button-secondary</button>
+          <button class="button button-primary button-clear block">.button-primary</button>
+          <button class="button button-info button-clear block">.button-info</button>
+          <button class="button button-success button-clear block">.button-success</button>
+          <button class="button button-warning button-clear block">.button-warning</button>
+          <button class="button button-danger button-clear block">.button-danger</button>
+          <button class="button button-dark button-clear block">.button-dark</button>
+        </p>
+
+      </div>
+
+      <hr>
+
+      <h3>a.block (parent w/out padding)</h3>
+      <p>
+        <a class="button block button-default"><i class="icon-home"></i> .button-default</a>
+        <a class="button block button-secondary">.button-secondary</a>
+        <a class="button block button-primary">.button-primary</a>
+        <a class="button block button-info">.button-info</a>
+        <a class="button block button-success">.button-success</a>
+        <a class="button block button-warning">.button-warning</a>
+        <a class="button block button-danger">.button-danger</a>
+        <a class="button block button-dark">.button-dark</a>
+      </p>
+
+      <hr>
+
+      <h3>a.block (.button-full on the parent)</h3>
+      <p class="button-full">
+        <a class="button button-default"><i class="icon-home"></i> .button-default</a>
+        <a class="button button-secondary">.button-secondary</a>
+        <a class="button button-primary">.button-primary</a>
+        <a class="button button-info">.button-info</a>
+        <a class="button button-success">.button-success</a>
+        <a class="button button-warning">.button-warning</a>
+        <a class="button button-danger">.button-danger</a>
+        <a class="button button-dark">.button-dark</a>
+      </p>
+
+      <hr>
+
+      <h3>button.block.button-full on each button and nothing on the parent</h3>
+      <p>
+        <button class="button button-full button-default"><i class="icon-home"></i> .button-default</button>
+        <button class="button button-full button-secondary">.button-secondary</button>
+        <button class="button button-full button-primary">.button-primary</button>
+        <button class="button button-full button-info">.button-info</button>
+        <button class="button button-full button-success">.button-success</button>
+        <button class="button button-full button-warning">.button-warning</button>
+        <button class="button button-full button-danger">.button-danger</button>
+        <button class="button button-full button-dark">.button-dark</button>
+      </p>
+
+      <hr>
+
+      <p>
+        <a class="button button-secondary" href="index.html">Homepage</a>
+      </p>
+
+    </main>
 
   </body>
 </html>
diff --git a/test/headers.html b/test/headers.html
index c6ce158f1f..6cf4f404a9 100644
--- a/test/headers.html
+++ b/test/headers.html
@@ -23,15 +23,23 @@
         <h1 class="title">Really really really really really really really really long title!</h1>
         <a class="button"><i class="icon-home"></i> Home</a>
       </header>
+
       <div class="bar bar-header-secondary bar-success">
+        <a class="button">
+          <i class="icon-home"></i> Home
+        </a>
         <div class="button-bar">
           <a class="button">Success</a>
           <a class="button">Warning</a>
           <a class="button">Danger</a>
         </div>
+        <a class="button">
+          Favorites
+        </a>
       </div>
+
       <header class="bar bar-header bar-default">
-        <a class="button button-icon">
+        <a class="button button-default">
           <i class="icon-home"></i> Home
         </a>
         <div class="button-bar">
@@ -39,29 +47,38 @@
           <a class="button">Warning</a>
           <a class="button">Danger</a>
         </div>
+        <a class="button">
+          <i class="icon-star"></i> Favorites
+        </a>
+      </header>
+
+      <div class="bar bar-header bar-default">
+        <a class="button button-icon">
+          <i class="icon-home"></i>
+        </a>
+        <div class="button-bar">
+          <a href="#" class="button button-clear">Edit</a>
+          <a href="#" class="button button-clear">Teach</a>
+          <a href="#" class="button button-clear">Delete</a>
+        </div>
+        <a class="button button-icon">
+          <i class="icon-home"></i>
+        </a>
+      </div>
+
+      <header class="bar bar-header bar-default">
+        <a class="button button-default">
+          <i class="icon-home"></i>
+        </a>
+        <div class="button-bar">
+          <a class="button">Success</a>
+          <a class="button">Warning</a>
+          <a class="button">Danger</a>
+        </div>
         <a class="button">
           <i class="icon-star"></i>
         </a>
       </header>
-      <div class="bar bar-header bar-default">
-        <div class="button-bar">
-          <a href="#" class="button button-clear">Edit</a>
-          <a href="#" class="button button-clear">Teach</a>
-          <a href="#" class="button button-clear">Delete</a>
-        </div>
-      </div>
-      <div class="bar bar-header bar-secondary">
-        <div class="button-bar">
-          <a href="#" class="button button-clear">Edit</a>
-          <a href="#" class="button button-clear">Teach</a>
-          <a href="#" class="button button-clear">Delete</a>
-        </div>
-      </div>
-
-      <main class="content padding has-header">
-        <p>Content element must have "has-header" as a classname.</p>
-        <p><a class="button button-secondary" href="index.html">Homepage</a></p>
-      </main>
 
     </section>
 
diff --git a/test/index.html b/test/index.html
index 8cb094f699..9691960524 100644
--- a/test/index.html
+++ b/test/index.html
@@ -20,17 +20,17 @@
           <p><a class="button button-block button-default" href="alerts.html"><i class="icon-star"></i> Alerts</a></p>
           <p><a class="button button-block button-default" href="buttons.html"><i class="icon-star"></i> Buttons</a></p>
           <p><a class="button button-block button-default" href="button-bar.html"><i class="icon-star"></i> Button Bar</a></p>
-          <p><a class="button button-block button-default" href="cards.html"><i class="icon-star-empty"></i> Cards</a></p>
+          <p><a class="button button-block button-default" href="cards.html"><i class="icon-star"></i> Cards</a></p>
           <p><a class="button button-block button-default" href="footers.html"><i class="icon-star"></i> Footers</a></p>
-          <p><a class="button button-block button-default" href="headers.html"><i class="icon-star-half-empty"></i> Headers</a></p>
+          <p><a class="button button-block button-default" href="headers.html"><i class="icon-star"></i> Headers</a></p>
           <p><a class="button button-block button-default" href="input-text.html"><i class="icon-star"></i> Input: Text (single-line)</a></p>
           <p><a class="button button-block button-default" href="input-textarea.html"><i class="icon-star"></i> Input: Text (multi-line)</a></p>
           <p><a class="button button-block button-default" href="input-radio.html"><i class="icon-star"></i> Input: Radio Buttons</a></p>
           <p><a class="button button-block button-default" href="input-range.html"><i class="icon-star"></i> Input: Range</a></p>
-          <p><a class="button button-block button-default" href="input-select.html"><i class="icon-star-empty"></i> Input: Select</a></p>
+          <p><a class="button button-block button-default" href="input-select.html"><i class="icon-star"></i> Input: Select</a></p>
           <p><a class="button button-block button-default" href="input-checkbox.html"><i class="icon-star"></i> Input: Checkbox</a></p>
           <p><a class="button button-block button-default" href="input-toggle.html"><i class="icon-star"></i> Input: Toggle</a></p>
-          <p><a class="button button-block button-default" href="lists.html"><i class="icon-star-half-empty"></i> Lists</a></p>
+          <p><a class="button button-block button-default" href="lists.html"><i class="icon-star"></i> Lists</a></p>
           <p><a class="button button-block button-default" href="modals.html"><i class="icon-star-empty"></i> Modals</a></p>
           <p><a class="button button-block button-default" href="popovers.html"><i class="icon-star-empty"></i> Popovers</a></p>
           <p><a class="button button-block button-default" href="pull-to-refresh.html"><i class="icon-star-empty"></i> Pull To Refresh</a></p>