diff --git a/dist/ionic.css b/dist/ionic.css
index 7cf8c82683..62eac31902 100644
--- a/dist/ionic.css
+++ b/dist/ionic.css
@@ -170,10 +170,6 @@ ul {
   .button.button-block {
     margin: 0 0 10px 0;
     display: block; }
-  .button.button-clear {
-    background: none;
-    border: none;
-    padding: 10px 0px; }
 
 .button-group {
   position: relative;
@@ -237,6 +233,32 @@ ul {
   -moz-border-radius-bottomleft: 0;
   border-bottom-left-radius: 0; }
 
+.button-bar {
+  display: -webkit-box;
+  display: box;
+  box-flex: 1;
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  box-orient: horizontal;
+  -webkit-box-orient: horizontal;
+  -moz-box-orient: horizontal; }
+
+.button-bar > .button {
+  box-flex: 1;
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  width: 0;
+  line-height: 8px;
+  border-radius: 0;
+  overflow: hidden;
+  text-align: center;
+  white-space: nowrap;
+  display: block;
+  text-overflow: ellipsis;
+  border-width: 1px 0px 1px 1px; }
+  .button-bar > .button:last-child {
+    border-right-width: 1px; }
+
 form {
   margin: 0 0 1.42857; }
 
@@ -1359,13 +1381,7 @@ main {
 .bar {
   background-color: white;
   border-style: solid;
-  border-width: 0;
-  /*
-  Disabled temporarily because it's annoying for testing.
-  @media screen and (orientation : landscape) {
-    padding: $barPaddingLandscape;
-  }
-  */ }
+  border-width: 0; }
   .bar.bar-header {
     border-bottom-width: 1px; }
   .bar.bar-footer {
@@ -1419,112 +1435,204 @@ main {
     .bar.bar-dark .tab-item a {
       color: white; }
 
+.bar-default .button {
+  color: #333333;
+  background-color: white;
+  border-color: #dddddd; }
+  .bar-default .button:hover {
+    color: #333333;
+    text-decoration: none; }
+  .bar-default .button.active, .bar-default .button:active {
+    background-color: #ebebeb;
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
+    border-color: #c4c4c4; }
+
+.bar-secondary .button {
+  color: #333333;
+  background-color: whitesmoke;
+  border-color: #cccccc; }
+  .bar-secondary .button:hover {
+    color: #333333;
+    text-decoration: none; }
+  .bar-secondary .button.active, .bar-secondary .button:active {
+    background-color: #e1e1e1;
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
+    border-color: #b3b3b3; }
+
+.bar-primary .button {
+  color: white;
+  background-color: #6999e9;
+  border-color: #5981c5; }
+  .bar-primary .button:hover {
+    color: white;
+    text-decoration: none; }
+  .bar-primary .button.active, .bar-primary .button:active {
+    background-color: #4581e4;
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
+    border-color: #3d67ae; }
+
+.bar-info .button {
+  color: white;
+  background-color: #60d2e6;
+  border-color: #51b3c4; }
+  .bar-info .button:hover {
+    color: white;
+    text-decoration: none; }
+  .bar-info .button.active, .bar-info .button:active {
+    background-color: #3dc8e0;
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
+    border-color: #3998a9; }
+
+.bar-success .button {
+  color: white;
+  background-color: #89c163;
+  border-color: #71a052; }
+  .bar-success .button:hover {
+    color: white;
+    text-decoration: none; }
+  .bar-success .button.active, .bar-success .button:active {
+    background-color: #73b447;
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
+    border-color: #597e41; }
+
+.bar-warning .button {
+  color: white;
+  background-color: #f0b840;
+  border-color: #cf9a29; }
+  .bar-warning .button:hover {
+    color: white;
+    text-decoration: none; }
+  .bar-warning .button.active, .bar-warning .button:active {
+    background-color: #edaa1a;
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
+    border-color: #a47a21; }
+
+.bar-danger .button {
+  color: white;
+  background-color: #de5645;
+  border-color: #bc4435; }
+  .bar-danger .button:hover {
+    color: white;
+    text-decoration: none; }
+  .bar-danger .button.active, .bar-danger .button:active {
+    background-color: #d43926;
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
+    border-color: #94362a; }
+
+.bar-dark .button {
+  color: white;
+  background-color: #444444;
+  border-color: #111111; }
+  .bar-dark .button:hover {
+    color: white;
+    text-decoration: none; }
+  .bar-dark .button.active, .bar-dark .button:active {
+    background-color: #303030;
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
+    border-color: black; }
+
 .button {
   color: #222222;
   border-radius: 2px;
   border-width: 1px;
   border-style: solid;
   padding: 10px 15px; }
+  .button.button-default {
+    color: #333333;
+    background-color: white;
+    border-color: #dddddd; }
+    .button.button-default:hover {
+      color: #333333;
+      text-decoration: none; }
+    .button.button-default.active, .button.button-default:active {
+      background-color: #ebebeb;
+      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
+      border-color: #c4c4c4; }
+  .button.button-secondary {
+    color: #333333;
+    background-color: whitesmoke;
+    border-color: #cccccc; }
+    .button.button-secondary:hover {
+      color: #333333;
+      text-decoration: none; }
+    .button.button-secondary.active, .button.button-secondary:active {
+      background-color: #e1e1e1;
+      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
+      border-color: #b3b3b3; }
+  .button.button-primary {
+    color: white;
+    background-color: #6999e9;
+    border-color: #5981c5; }
+    .button.button-primary:hover {
+      color: white;
+      text-decoration: none; }
+    .button.button-primary.active, .button.button-primary:active {
+      background-color: #4581e4;
+      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
+      border-color: #3d67ae; }
+  .button.button-info {
+    color: white;
+    background-color: #60d2e6;
+    border-color: #51b3c4; }
+    .button.button-info:hover {
+      color: white;
+      text-decoration: none; }
+    .button.button-info.active, .button.button-info:active {
+      background-color: #3dc8e0;
+      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
+      border-color: #3998a9; }
+  .button.button-success {
+    color: white;
+    background-color: #89c163;
+    border-color: #71a052; }
+    .button.button-success:hover {
+      color: white;
+      text-decoration: none; }
+    .button.button-success.active, .button.button-success:active {
+      background-color: #73b447;
+      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
+      border-color: #597e41; }
+  .button.button-warning {
+    color: white;
+    background-color: #f0b840;
+    border-color: #cf9a29; }
+    .button.button-warning:hover {
+      color: white;
+      text-decoration: none; }
+    .button.button-warning.active, .button.button-warning:active {
+      background-color: #edaa1a;
+      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
+      border-color: #a47a21; }
+  .button.button-danger {
+    color: white;
+    background-color: #de5645;
+    border-color: #bc4435; }
+    .button.button-danger:hover {
+      color: white;
+      text-decoration: none; }
+    .button.button-danger.active, .button.button-danger:active {
+      background-color: #d43926;
+      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
+      border-color: #94362a; }
+  .button.button-dark {
+    color: white;
+    background-color: #444444;
+    border-color: #111111; }
+    .button.button-dark:hover {
+      color: white;
+      text-decoration: none; }
+    .button.button-dark.active, .button.button-dark:active {
+      background-color: #303030;
+      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
+      border-color: black; }
+  .button.button-clear {
+    background: none;
+    border: none;
+    padding: 10px 0px; }
 
 a.button {
   text-decoration: none; }
 
-.button-default {
-  color: #333333;
-  background-color: white;
-  border-color: #dddddd; }
-  .button-default:hover {
-    color: #333333;
-    text-decoration: none; }
-  .button-default.active, .button-default:active {
-    background-color: #ebebeb;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-    border-color: #c4c4c4; }
-
-.button-secondary {
-  color: #333333;
-  background-color: whitesmoke;
-  border-color: #cccccc; }
-  .button-secondary:hover {
-    color: #333333;
-    text-decoration: none; }
-  .button-secondary.active, .button-secondary:active {
-    background-color: #e1e1e1;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-    border-color: #b3b3b3; }
-
-.button-primary {
-  color: white;
-  background-color: #6999e9;
-  border-color: #5981c5; }
-  .button-primary:hover {
-    color: white;
-    text-decoration: none; }
-  .button-primary.active, .button-primary:active {
-    background-color: #4581e4;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-    border-color: #3d67ae; }
-
-.button-info {
-  color: white;
-  background-color: #60d2e6;
-  border-color: #51b3c4; }
-  .button-info:hover {
-    color: white;
-    text-decoration: none; }
-  .button-info.active, .button-info:active {
-    background-color: #3dc8e0;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-    border-color: #3998a9; }
-
-.button-success {
-  color: white;
-  background-color: #89c163;
-  border-color: #71a052; }
-  .button-success:hover {
-    color: white;
-    text-decoration: none; }
-  .button-success.active, .button-success:active {
-    background-color: #73b447;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-    border-color: #597e41; }
-
-.button-warning {
-  color: white;
-  background-color: #f0b840;
-  border-color: #cf9a29; }
-  .button-warning:hover {
-    color: white;
-    text-decoration: none; }
-  .button-warning.active, .button-warning:active {
-    background-color: #edaa1a;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-    border-color: #a47a21; }
-
-.button-danger {
-  color: white;
-  background-color: #de5645;
-  border-color: #bc4435; }
-  .button-danger:hover {
-    color: white;
-    text-decoration: none; }
-  .button-danger.active, .button-danger:active {
-    background-color: #d43926;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-    border-color: #94362a; }
-
-.button-dark {
-  color: white;
-  background-color: #444444;
-  border-color: #111111; }
-  .button-dark:hover {
-    color: white;
-    text-decoration: none; }
-  .button-dark.active, .button-dark:active {
-    background-color: #303030;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-    border-color: black; }
-
 .button-transparent {
   background: transparent; }
 
diff --git a/example/headers.html b/example/headers.html
index d94a17b8db..93d8d4610d 100644
--- a/example/headers.html
+++ b/example/headers.html
@@ -24,11 +24,10 @@
         </div>
       </header>
       <div class="bar bar-header-secondary bar-dark">
-        <div class="button-group">
-          <a class="button button-primary">Success</a>
-          <a class="button button-primary">Warning</a>
-          <a class="button button-primary">Danger</a>
-          <a class="button button-primary">Dark</a>
+        <div class="button-bar">
+          <a class="button">Success</a>
+          <a class="button">Warning</a>
+          <a class="button">Danger</a>
         </div>
       </div>
 
diff --git a/scss/ionic/structure/_button-group.scss b/scss/ionic/structure/_button-group.scss
index d2e72c1cff..f601dec10d 100644
--- a/scss/ionic/structure/_button-group.scss
+++ b/scss/ionic/structure/_button-group.scss
@@ -62,3 +62,33 @@
 .button-group > .button-group:last-child > .button:first-child {
   @include border-left-radius(0);
 }
+
+.button-bar {
+  display: -webkit-box;
+  display: box;
+
+  @include box-flex(1);
+  @include box-orient(horizontal);
+
+}
+
+.button-bar > .button {
+  @include box-flex(1);
+  // Fix for box-flex width issue
+  width: 0;
+
+  line-height: 8px;
+  border-radius: 0;
+  
+  overflow: hidden;
+  text-align: center;
+  white-space: nowrap;
+  display: block;
+  text-overflow: ellipsis;
+
+  border-width: 1px 0px 1px 1px;
+
+  &:last-child {
+    border-right-width: 1px;
+  }
+}
diff --git a/scss/ionic/structure/_button.scss b/scss/ionic/structure/_button.scss
index 02267f4a70..3d285ddb88 100644
--- a/scss/ionic/structure/_button.scss
+++ b/scss/ionic/structure/_button.scss
@@ -10,10 +10,4 @@
     margin: $buttonBlockMargin;
     display: block;
   }
-
-  &.button-clear {
-    background: none;
-    border: none;
-    padding: $buttonClearPadding;
-  }
 }
diff --git a/scss/ionic/theme/_bar.scss b/scss/ionic/theme/_bar.scss
index ca07156cdf..5077f4d41b 100644
--- a/scss/ionic/theme/_bar.scss
+++ b/scss/ionic/theme/_bar.scss
@@ -18,6 +18,7 @@
       color: $darkColor;
     }
   }
+
   &.bar-secondary {
     background-color: $barSecondaryBackground;
     border-color: $barSecondaryBorderColor;
@@ -77,11 +78,56 @@
     }
   }
 
-  /*
-  Disabled temporarily because it's annoying for testing.
-  @media screen and (orientation : landscape) {
-    padding: $barPaddingLandscape;
-  }
-  */
-
+  //
+  //Disabled temporarily because it's annoying for testing.
+  //@media screen and (orientation : landscape) {
+  //padding: $barPaddingLandscape;
+  //}
 }
+
+// Default styles for buttons inside of styled bars
+
+.bar-default {
+  .button {
+    @include button-style($buttonDefaultBackground, $buttonDefaultBorder, $darkColor);
+  }
+}
+
+.bar-secondary {
+  .button {
+    @include button-style($buttonSecondaryBackground, $buttonSecondaryBorder, $darkColor);
+  }
+}
+
+.bar-primary {
+  .button {
+    @include button-style($buttonPrimaryBackground, $buttonPrimaryBorder, $lightColor);
+  }
+}
+.bar-info {
+  .button {
+    @include button-style($buttonInfoBackground, $buttonInfoBorder, $lightColor);
+  }
+}
+.bar-success {
+  .button {
+    @include button-style($buttonSuccessBackground, $buttonSuccessBorder, $lightColor);
+  }
+}
+.bar-warning {
+  .button {
+    @include button-style($buttonWarningBackground, $buttonWarningBorder, $lightColor);
+  }
+}
+.bar-danger {
+  .button {
+    @include button-style($buttonDangerBackground, $buttonDangerBorder, $lightColor);
+  }
+}
+.bar-dark {
+  // A default style for buttons
+  .button {
+    @include button-style($buttonDarkBackground, $buttonDarkBorder, $lightColor);
+  }
+}
+
diff --git a/scss/ionic/theme/_button.scss b/scss/ionic/theme/_button.scss
index 0d22f3104d..b3f6ca55ed 100644
--- a/scss/ionic/theme/_button.scss
+++ b/scss/ionic/theme/_button.scss
@@ -4,40 +4,46 @@
   border-width: $buttonBorderWidth;
   border-style: solid;
 	padding: $buttonPadding;
+
+  &.button-default {
+    @include button-style($buttonDefaultBackground, $buttonDefaultBorder, $darkColor);
+  }
+  &.button-secondary {
+    @include button-style($buttonSecondaryBackground, $buttonSecondaryBorder, $darkColor);
+  }
+  &.button-primary {
+    @include button-style($buttonPrimaryBackground, $buttonPrimaryBorder, $lightColor);
+  }
+  &.button-info {
+    @include button-style($buttonInfoBackground, $buttonInfoBorder, $lightColor);
+  }
+  &.button-success {
+    @include button-style($buttonSuccessBackground, $buttonSuccessBorder, $lightColor);
+  }
+  &.button-warning {
+    @include button-style($buttonWarningBackground, $buttonWarningBorder, $lightColor);
+  }
+  &.button-danger {
+    @include button-style($buttonDangerBackground, $buttonDangerBorder, $lightColor);
+  }
+  &.button-dark {
+    @include button-style($buttonDarkBackground, $buttonDarkBorder, $lightColor);
+  }
+  &.button-clear {
+    background: none;
+    border: none;
+    padding: $buttonClearPadding;
+  }
 }
 
 a.button {
   text-decoration: none;
 }
 
-.button-default {
-  @include button-style($buttonDefaultBackground, $buttonDefaultBorder, $darkColor);
-}
-.button-secondary {
-  @include button-style($buttonSecondaryBackground, $buttonSecondaryBorder, $darkColor);
-}
-.button-primary {
-  @include button-style($buttonPrimaryBackground, $buttonPrimaryBorder, $lightColor);
-}
-.button-info {
-  @include button-style($buttonInfoBackground, $buttonInfoBorder, $lightColor);
-}
-.button-success {
-  @include button-style($buttonSuccessBackground, $buttonSuccessBorder, $lightColor);
-}
-.button-warning {
-  @include button-style($buttonWarningBackground, $buttonWarningBorder, $lightColor);
-}
-.button-danger {
-  @include button-style($buttonDangerBackground, $buttonDangerBorder, $lightColor);
-}
-.button-dark {
-  @include button-style($buttonDarkBackground, $buttonDarkBorder, $lightColor);
-}
 .button-transparent {
   background: transparent;
 }
 
 .button-borderless [class^="icon-"] {
   font-size: 24px;  
-}
\ No newline at end of file
+}