Sass Button Mixins

Sass-buttons.scss

@import "compass/css3";

// make a button with a lot of help
@mixin btn($bottom: gray, $top: white, $border: black, $highlight: blue, $lowlight: gray, $text: white) {
  border: 1px solid $border;
  color: $text;
  border-radius: 5px;
  box-shadow: inset  0 1px 0px $highlight, 0 2px 0px $lowlight;
  text-shadow: 0px -1px 0px rgba(100, 100, 100, .5);
  background: $bottom;
  @include background-image(linear-gradient($top, $bottom));
}

// make a button from a single color
@mixin buttonStyle($base-color) {
  $gray-border-color: #ababab;
  $light-gray-text-color: #666;
  $text-color: white;
  $gray: if(saturation($base-color) < 10, true, false);
  $gray-text-color: if(lightness($base-color) > 68, $light-gray-text-color, $text-color);
  $text: if($gray, $gray-text-color, $text-color);
  $bottom-color: desaturate(darken(adjust_hue($base-color, -7), 3%), 1%);
  $border-color: desaturate(darken(adjust_hue($base-color, -13), 3%), 1%);
  $border-color: if($gray, $gray-border-color, $border-color);
  $highlight-color: lighten(desaturate($base-color, 5%), 15%);
  $lowlight-color: hsl(hue($base-color) - 20, 38%, 90%);
  @include btn($bottom-color, $base-color, $border-color, $highlight-color, $lowlight-color, $text);
} 

.btnYello {
  @include buttonStyle(rgb(253, 187, 31));
}
  
.btnGray {
  @include buttonStyle(#F4F4F2);
}
  
.btnBlue {
  @include buttonStyle(rgb(100, 145, 185));
}

.btnTeal {
  @include buttonStyle(teal);
}

.btnBlack {
  @include buttonStyle(#333);
}

.btnRed {
  @include buttonStyle(rgb(225, 133, 133));
}