diff --git a/src/components/app/mixins/_flex.scss b/src/components/app/mixins/_flex.scss
index a70454bc45..2335f220fd 100644
--- a/src/components/app/mixins/_flex.scss
+++ b/src/components/app/mixins/_flex.scss
@@ -52,13 +52,20 @@
   flex-wrap: $value;
 }
 
-@mixin flex($fg: 1, $fs: null, $fb: null) {
-  -webkit-box-flex: $fg;
-  -webkit-flex: $fg $fs $fb;
-  -moz-box-flex: $fg;
-  -moz-flex: $fg $fs $fb;
-  -ms-flex: $fg $fs $fb;
-  flex: $fg $fs $fb;
+@mixin flex($flex-grow: 1, $flex-shrink: null, $flex-basis: null) {
+  -webkit-box-flex: $flex-grow;
+  -webkit-flex: $flex-grow $flex-shrink $flex-basis;
+  -moz-box-flex: $flex-grow;
+  -moz-flex: $flex-grow $flex-shrink $flex-basis;
+  -ms-flex: $flex-grow $flex-shrink $flex-basis;
+  flex: $flex-grow $flex-shrink $flex-basis;
+}
+
+@mixin flex-shrink($value: 1) {
+  -webkit-flex-shrink: $value;
+  -moz-flex-shrink: $value;
+  -ms-flex-negative: $value;
+  flex-shrink: $value;
 }
 
 @mixin flex-flow($values: (row nowrap)) {
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index 31d52eced7..f351d94580 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -79,25 +79,30 @@ $button-bar-button-icon-size:     20px !default;
 
 .button {
   position: relative;
-  display: inline-block;
+
+  @include flex-display-inline();
+  @include flex-shrink(0);
+  @include flex-flow(row nowrap);
+  @include flex-align-items(center);
+  @include flex-justify-content(center);
+
   margin: 0;
   padding: 0 $button-padding;
 
   min-width: ($button-padding * 3) + $button-font-size;
   min-height: $button-height + 5px;
 
+  line-height: normal;
+  vertical-align: baseline;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
   border-width: $button-border-width;
   border-style: solid;
   border-radius: $button-border-radius;
 
-  vertical-align: top;
-  text-align: center;
-
-  text-overflow: ellipsis;
-  font-size: $button-font-size;
-  line-height: $button-height - $button-border-width + 1px;
   outline: none;
-
   cursor: pointer;
 
   &:after {
@@ -121,7 +126,6 @@ $button-bar-button-icon-size:     20px !default;
   min-width: $button-small-height;
   min-height: $button-small-height + 2;
   font-size: $button-small-font-size;
-  line-height: $button-small-height - $button-border-width - 1;
 }
 
 .button-large {
@@ -129,7 +133,6 @@ $button-bar-button-icon-size:     20px !default;
   min-width: ($button-large-padding * 3) + $button-large-font-size;
   min-height: $button-large-height + 5;
   font-size: $button-large-font-size;
-  line-height: $button-large-height - $button-border-width;
 }