SCSS HSB buttons

buttons.scss

@function hsb($h-hsb, $s-hsb, $b-hsb, $a: 1) {
  @if $b-hsb == 0 {
    @return hsla(0, 0, 0, $a)
  } @else {
    $l-hsl: ($b-hsb/2) * (2 - ($s-hsb/100));
    $s-hsl: ($b-hsb * $s-hsb) / if($l-hsl < 50, $l-hsl * 2, 200 - $l-hsl * 2);
    @return hsla($h-hsb, $s-hsl, $l-hsl, $a);
  }
}

@mixin buttonize($h, $s, $b) {

  $color: hsb($h, $s, $b);
  $dark: hsb($h, $s + 10, $b);
  $inset-top: inset 0 1px 0 hsb($h, $s - 20, $b + 10);
  $inset-bottom: inset 0 -1px 0 hsb($h, $s + 10, $b - 10);
  $inset: inset 0 0 0 1px hsb($h, $s - 10, $b);

  background-color: $color;
  background-image: linear-gradient(to bottom, $color, $dark);
  border: 1px solid hsb($h, $s + 20, $b - 20);
  box-shadow: $inset-top,
              $inset-bottom,
              $inset,
              0 2px 4px rgba(black, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(black, 0.3);

  &:hover,
  &:focus {
    background: $dark;
    border-color: hsb($h, $s + 40, $b - 40);
    box-shadow: $inset-top,
                $inset-bottom,
                $inset;
  }

  &:active {
    background: $dark;
    box-shadow: inset 0 2px 3px rgba(black, 0.2);
  }

  .fa {
    color: hsb($h, $s + 20, $b - 20);
    text-shadow: 0 1px 0 rgba(white, 0.3);
  }

}

strong{ font-weight: 500;}

.button{ @include buttonize(4, 58, 93); border-radius: 3px; cursor: pointer; display: inline-block; font-family: Effra; font-size: 14px; font-weight: 300; line-height: 20px; padding: 9px 16px 9px; margin: 16px 0 0 16px; transition: all 20ms ease-out; vertical-align: top;}
.button-red{ @include buttonize(4, 58, 93);}
.button-green{ @include buttonize(97, 42, 80);}
.button-blue{ @include buttonize(199, 71, 89);}
.button .fa{ float: left; font-size: 14px; line-height: 20px; margin: -1px 8px 0 -4px; vertical-align: top;}