A scss mixin for a button style.

_mixin_button.scss

@import "compass";

$button-radius: 4px !default;

@mixin button(
  $base-color:#fff,
  $size:small,
  $radius:$button-radius
) {

  // Color Palette
  $color-text:     hsl(0, 0, 100%);

  $border:         adjust-color($base-color, $saturation: 10%, $lightness: -25%);
  $gradient:       adjust-color($base-color, $saturation:  0%, $lightness: -11%);
  $shadow-box:     adjust-color($base-color, $saturation: -8%, $lightness:  10%);
  $shadow-text:    adjust-color($base-color, $saturation: 15%, $lightness: -18%);

  $hover-color:    adjust-color($base-color, $saturation: -4%, $lightness:  -5%);
  $hover-gradient: adjust-color($base-color, $saturation:  0%, $lightness: -14%);
  $hover-shadow:   adjust-color($base-color, $saturation: -7%, $lightness:   5%);

  @if lightness($base-color) > 75% {
    $color-text:   hsl(0, 0, 20%);
    $shadow-text:  adjust-color($base-color, $saturation: 10%, $lightness:   5%);
  }

  @if type-of($size) == number {
    $radius: $size;
    $size:medium;
  }

  @if      $size == large  { font-size:14px; padding: 6px 25px 8px; margin: 8px 8px; }
  @else if $size == medium { font-size:12px; padding: 4px 20px 6px; margin: 4px 4px; }
  @else if $size == small  { font-size:11px; padding: 2px 15px 3px; margin: 2px 2px; }
  @else                    { font-size:10px; padding: 1px  3px 2px; margin: 1px 1px; }


  @include border-radius ($radius);
  @include box-shadow (inset 0 1px 0 0 $shadow-box);
  @include linear-gradient ($gradient, $base-color);
  background-color: $base-color;
	border: solid 1px $border;

  display: inline-block;
  font-family: tahoma, helvetica, arial, freesans, sans-serif;
  outline: none;

  color: $color-text;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 1px $shadow-text;
  vertical-align: baseline;

  cursor: hand;
  cursor: pointer;

  &:hover:not(:disabled) {
    @include box-shadow (inset 0 1px 0 0 $hover-shadow);
    @include linear-gradient ($hover-gradient, $hover-color);
  }

  &:active:not(:disabled) {
    @include linear-gradient ($hover-color, $hover-gradient);
    @include box-shadow (inset 0 1px 0 0 $hover-shadow);
  }
}