<a class="button">
  <i class="fa fa-cloud-download"></i>
  <strong>Download</strong>
</a>
<a class="button button-yellow">
  <i class="fa fa-clock-o"></i>
  Waiting for <strong>confirmation</strong>
</a>
<a class="button button-orange">
  <i class="fa fa-exclamation-triangle"></i>
  Watch <strong>out!</strong>
</a>
<a class="button button-red">
  <i class="fa fa-times"></i>
  Order <strong>cancelled</strong>
</a>
<a class="button button-purple">
  <i class="fa fa-rocket"></i>
  Fly me to the <strong>Moon</strong>
</a>
<a class="button button-blue">
  <i class="fa fa-globe"></i>
  Hello <strong>World</strong>
</a>
<a class="button button-green">
  <i class="fa fa-check"></i>
  Order <strong>received</strong>
</a>

@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);
  }
}

@function hsb-saturate($s, $a) {
  @if $s == 0 {
    @return 0;
  } @else {
    @return $s + $a;
  }
}

@mixin buttonize($h, $s, $b, $light: 0) {

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

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

  @if $light == 1 {
    color: hsb($h, hsb-saturate($s, 40), $b - 40);
    text-shadow: 0 1px 0 rgba(white, 0.5);
  } @else {
    color: white;
    text-shadow: 0 1px 2px rgba(black, 0.3);
  }

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

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

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

}

strong{ font-weight: bold;}

.button{ @include buttonize(0, 0, 95, 1); border-radius: 3px; cursor: pointer; display: inline-block; font-family: Verdana, sans-serif; font-size: 12px; font-weight: 400; line-height: 20px; padding: 9px 16px 9px; margin: 16px 0 0 16px; transition: all 20ms ease-out; vertical-align: top;}
.button-blue{ @include buttonize(199, 71, 89);}
.button-green{ @include buttonize(97, 42, 80);}
.button-purple{ @include buttonize(249, 34, 73);}
.button-orange{ @include buttonize(26, 77, 96);}
.button-red{ @include buttonize(4, 58, 93);}
.button-yellow{ @include buttonize(49, 54, 99, 1);}
.button .fa{ float: left; font-size: 14px; line-height: 20px; margin: -1px 8px 0 -4px; vertical-align: top;}