Generated by SassMeister.com.

SassMeister-input-HTML.html

<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>

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

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

SassMeister-output.css

strong {
  font-weight: bold;
}

.button {
  background-color: #f2f2f2;
  background-image: linear-gradient(to bottom, #f2f2f2, #f2f2f2);
  border: 1px solid #bfbfbf;
  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: #8c8c8c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  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:hover, .button:focus {
  background: #f2f2f2;
  border-color: #8c8c8c;
  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2;
}

.button:active {
  background: #f2f2f2;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

.button .fa {
  color: #bfbfbf;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button-blue {
  background-color: #42b0e3;
  background-image: linear-gradient(to bottom, #42b0e3, #2ba9e3);
  border: 1px solid #107db0;
  box-shadow: inset 0 1px 0 #7cd4fc, inset 0 -1px 0 #2696c9, inset 0 0 0 1px #59b7e3, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.button-blue:hover, .button-blue:focus {
  background: #2ba9e3;
  border-color: #004c6f;
  box-shadow: inset 0 1px 0 #7cd4fc, inset 0 -1px 0 #2696c9, inset 0 0 0 1px #59b7e3;
}

.button-blue:active {
  background: #2ba9e3;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

.button-blue .fa {
  color: #107db0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button-green {
  background-color: #97cc76;
  background-image: linear-gradient(to bottom, #97cc76, #8bcc62);
  border: 1px solid #5f993a;
  box-shadow: inset 0 1px 0 #c6e6b3, inset 0 -1px 0 #79b356, inset 0 0 0 1px #a4cc8b, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.button-green:hover, .button-green:focus {
  background: #8bcc62;
  border-color: #326612;
  box-shadow: inset 0 1px 0 #c6e6b3, inset 0 -1px 0 #79b356, inset 0 0 0 1px #a4cc8b;
}

.button-green:active {
  background: #8bcc62;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

.button-green .fa {
  color: #5f993a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button-purple {
  background-color: #847bba;
  background-image: linear-gradient(to bottom, #847bba, #7568ba);
  border: 1px solid #493e87;
  box-shadow: inset 0 1px 0 #bab6d4, inset 0 -1px 0 #655aa1, inset 0 0 0 1px #948dba, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.button-purple:hover, .button-purple:focus {
  background: #7568ba;
  border-color: #1f1654;
  box-shadow: inset 0 1px 0 #bab6d4, inset 0 -1px 0 #655aa1, inset 0 0 0 1px #948dba;
}

.button-purple:active {
  background: #7568ba;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

.button-purple .fa {
  color: #493e87;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button-orange {
  background-color: #f58a38;
  background-image: linear-gradient(to bottom, #f58a38, #f57c20);
  border: 1px solid #c25706;
  box-shadow: inset 0 1px 0 #ffb984, inset 0 -1px 0 #db6f1d, inset 0 0 0 1px #f59851, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.button-orange:hover, .button-orange:focus {
  background: #f57c20;
  border-color: #773300;
  box-shadow: inset 0 1px 0 #ffb984, inset 0 -1px 0 #db6f1d, inset 0 0 0 1px #f59851;
}

.button-orange:active {
  background: #f57c20;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

.button-orange .fa {
  color: #c25706;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button-red {
  background-color: #ed6d64;
  background-image: linear-gradient(to bottom, #ed6d64, #ed574c);
  border: 1px solid #ba3329;
  box-shadow: inset 0 1px 0 #ffb0aa, inset 0 -1px 0 #d44d44, inset 0 0 0 1px #ed837b, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.button-red:hover, .button-red:focus {
  background: #ed574c;
  border-color: #870c03;
  box-shadow: inset 0 1px 0 #ffb0aa, inset 0 -1px 0 #d44d44, inset 0 0 0 1px #ed837b;
}

.button-red:active {
  background: #ed574c;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

.button-red .fa {
  color: #ba3329;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button-yellow {
  background-color: #fce374;
  background-image: linear-gradient(to bottom, #fce374, #fcdf5b);
  border: 1px solid #c9ae34;
  box-shadow: inset 0 1px 0 #fff6ce, inset 0 -1px 0 #e3c852, inset 0 0 0 1px #fce88d, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: #967d09;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.button-yellow:hover, .button-yellow:focus {
  background: #fcdf5b;
  border-color: #967d09;
  box-shadow: inset 0 1px 0 #fff6ce, inset 0 -1px 0 #e3c852, inset 0 0 0 1px #fce88d;
}

.button-yellow:active {
  background: #fcdf5b;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

.button-yellow .fa {
  color: #c9ae34;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button .fa {
  float: left;
  font-size: 14px;
  line-height: 20px;
  margin: -1px 8px 0 -4px;
  vertical-align: top;
}

SassMeister-rendered.html

<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>