COMPASS mixin: CSS3 gradient button

CSS3 gradient button

@import "compass/reset";
@import "compass/css3";

@mixin gradientButton($baseColour: #eee, $textColour: #333) {
  $darker-1: darken($baseColour, 7%); /* ~#ddd */
  $darker-2: darken($baseColour, 15%); /* ~#ccc */
  $darker-3: darken($baseColour, 20%); /* ~#bbb */
  $darker-4: darken($baseColour, 34%); /* ~#999 */
  
  $active-1: darken($baseColour, 27%); /* ~#aaa */
  $active-2: darken($baseColour, 38%); /* ~#888 */
  background-color: $baseColour;
  @include background-image(linear-gradient($baseColour, $darker-2));
  
  @include border-radius(5px);
  border: 1px solid $darker-2;
  border-bottom: 1px solid $darker-3;
  @include box-shadow(#888 0 2px 2px);
  color: $textColour;
  font-weight: bold;
  padding: 0.25em;
  text-align: center;
  @if lightness($textColour) > 50 {
  /* create dark shadow for light text colours */
    text-shadow: 0 1px 0 darken($baseColour, 30%);
  } @else {
    text-shadow: 0 1px 0 $baseColour;
  }
  &:hover {
    background-color: $darker-1;
    @include background-image(linear-gradient($darker-1, $darker-3));
    border: 1px solid $darker-3;
    border-bottom: 1px solid $darker-4;
    cursor: pointer;
    @if lightness($textColour) > 50 {
    /* create dark shadow for light text colours */
      text-shadow: 0 1px 0 darken($darker-1, 30%);
    } @else {
      text-shadow: 0 1px 0 $darker-1;
    }
  }
  &:active {
    border: 1px solid $active-1;
    border-bottom: 1px solid $active-2;
    @include box-shadow($active-1 0 0 5px inset, $baseColour 0 1px 0 0 inset);
  }
}

button {
  @include gradientButton();
}

button.badass {
  @include gradientButton(#bada55);
}

button.generated {
  @include gradientButton(#91ACBC, #fff);
}