Sass button mixins. The color and sizing properties separated to make it convenient for defining button modifiers without redefining the whole button.

_button.scss

@mixin button-common() {
  border: 0 none;
  color: #fff;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  vertical-align: baseline;
  text-decoration: none;

  &:active,
  &--active {
    outline: none;
  }
}

@mixin button-color($color) {
  background-color: $color;

  &:hover,
  &--hover {
    background-color: darken($color, 3%);
  }

  &:active,
  &--active {
    background-color: darken($color, 8%);
  }
}

@mixin button-size($height) {
  height: $height;
  line-height: $height;
  border-radius: $height * ($input-border-radius / $input-height);
  font-size: $height * ($font-size-default / $input-height);
  $padding: $height * ($input-padding / $input-height);
  padding: 0 $padding;
}

@mixin button($color: $orange, $height: $input-height) {
  @include button-common();
  @include button-color($color);
  @include button-size($height);
}