@mixin btn($name, $color) {
  .btn-#{$name} {
    border-bottom-color: darken($color, 25%);
    background-color: $color;

    &:hover {
      background-color: lighten($color, 5%);
    }
  }
}

input[type="button"],
input[type="submit"],
button,
.btn {
  @include ui-padding;
  display: inline-block;
  margin: 0;
  border: 0;
  border-bottom: 2px solid darken($color-btn, 25%);
  border-radius: $ui-border-radius;
  background-color: $color-btn;
  color: $color-white;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: middle;
  appearance: none;

  &:hover {
    background-color: lighten($color-btn, 5%);
  }
}

button[disabled],
.btn-disabled {
  border-bottom-color: darken($color-disabled, 20%);
  background-color: $color-disabled;
  cursor: not-allowed;

  &:hover {
    background-color: $color-disabled;
  }

  @if $link-active {
    &:active {
      top: 0;
    }
  }
}

.btn-block {
  display: block;
  padding-right: 0;
  padding-left: 0;
  text-align: center;
}

@include btn('brand', $color-brand);
@include btn('positive', $color-positive);
@include btn('negative', $color-negative);

@mixin btn($name, $color) {
  .btn-#{$name} {
    border-bottom-color: darken($color, 25%);
    background-color: $color;

    &:hover {
      background-color: lighten($color, 5%);
    }
  }
}

input[type="button"],
input[type="submit"],
button,
.btn {
  @include ui-padding;
  display: inline-block;
  margin: 0;
  border: 0;
  border-bottom: 2px solid darken($color-btn, 25%);
  border-radius: $ui-border-radius;
  background-color: $color-btn;
  color: $color-white;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: 1px;
  appearance: none;

  &:hover {
    background-color: lighten($color-btn, 5%);
  }
}

button[disabled],
.btn-disabled {
  border-bottom-color: darken($color-disabled, 20%);
  background-color: $color-disabled;
  cursor: not-allowed;

  &:hover {
    background-color: $color-disabled;
  }

  @if $link-active {
    &:active {
      top: 0;
    }
  }
}

.btn-block {
  display: block;
  padding-right: 0;
  padding-left: 0;
  text-align: center;
}

@include btn('brand', $color-brand);
@include btn('positive', $color-positive);
@include btn('negative', $color-negative);

Fix vertical alignment of buttons
Fix vertical alignment of buttons

1px because has 2px border-bottom
