A CodePen by Matt . button-gradient mixin for sass

index.html

<div class="column">
  <a class="btn red">Button</a>
  <div class="swatch red"></div>
  <a class="btn darkRed">Button</a>
  <div class="swatch darkRed"></div>
  <a class="btn burntRed">Button</a>
  <div class="swatch burntRed"></div>
  <a class="btn brightBlue">Button</a>
  <div class="swatch brightBlue"></div>
  <a class="btn blue">Button</a>
  <div class="swatch blue"></div>
  <a class="btn bgColor">Button</a>
  <div class="swatch bgColor"></div>
  <a class="btn bgColor black">Button</a>
  <div class="swatch bgColor"></div>
</div>
<div class="column">
  <a class="btn lightGreen">Button</a>
  <div class="swatch lightGreen"></div>
  <a class="btn green">Button</a>
  <div class="swatch green"></div>
  <a class="btn darkGreen">Button</a>
  <div class="swatch darkGreen"></div>
  <a class="btn yellow">Button</a>
  <div class="swatch yellow"></div>
  <a class="btn darkYellow">Button</a>
  <div class="swatch darkYellow"></div>
  <a class="btn orange">Button</a>
  <div class="swatch orange"></div>
  <a class="btn darkOrange">Button</a>
  <div class="swatch darkOrange"></div>
</div>

style.scss

@import "compass";
/* 
 * @mixin button-gradient
 * Pass a hex value and [optionally] a text color
 */
@mixin button-gradient($hex, $color: white) {
  
  color:$color;
  
  @if (lightness($hex) - lightness($color)) > 30 {
    text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.5);
  } @else if (lightness($hex) - lightness($color)) < -30 {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  } @else if (lightness($hex) - lightness($color)) > 0 {
    text-shadow: -1px -1px -1px rgba(255, 255, 255, 1);
  } @else if (lightness($hex) - lightness($color)) < 0 {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
  }
  
  @include background-image(
    linear-gradient(
      lighten($hex, 15%), lighten($hex, 5%), $hex, darken($hex, 3%)
    )
  );
  
  background-repeat: repeat-x;
  border-color: darken($hex, 20%);
  border-top-color: darken($hex, 10%);
  
  
  &:hover,
  &:active,
  &.active,
  &.disabled,
  &[disabled] {
    color: $color;
    background-color: darken($hex, 3%);
  }

  &:active,
  &.active {
    background-color: darken($hex, 5%);
  }
  
}

$red : #e8111a;
$darkRed : #c33;
$burntRed : #62320f;
$brightBlue : #2388b5;
$blue : #185874;
$bgColor : #87cbe6;

.red {
  @include button-gradient($red);
}

.darkRed {
  @include button-gradient($darkRed);
}

.burntRed {
  @include button-gradient($burntRed);
}

.brightBlue {
  @include button-gradient($brightBlue);
}

.blue {
  @include button-gradient($blue);
}

.bgColor {
  @include button-gradient($bgColor);
}

.bgColor.black {
  @include button-gradient($bgColor, #333);
}

a { 
  clear:both;
  display:block;
  float:left;
  margin:10px;
}

.swatch{
  float:left;
  width:20px;
  height:50px;
}

.swatch.red{
  background:$red;
}

.swatch.darkRed{
  background:$darkRed;
}
.swatch.burntRed{
  background:$burntRed;
}
.swatch.brightBlue{
  background:$brightBlue;
}
.swatch.blue{
  background:$blue;
}
.swatch.bgColor{
  background:$bgColor;
}

.column {
  float:left;
}

$green : #7fc21c;
$lightGreen : #d1e986;
$darkGreen : #008B46;
$yellow : #fffa96;
$darkYellow : #ffe600;
$orange : #ffd783;
$darkOrange : #ffad00;

.lightGreen {
  @include button-gradient($lightGreen);
}

.green {
  @include button-gradient($green);
}

.darkGreen {
  @include button-gradient($darkGreen);
}

.yellow {
  @include button-gradient($yellow);
}

.darkYellow {
  @include button-gradient($darkYellow);
}

.orange {
  @include button-gradient($orange);
}

.darkOrange {
  @include button-gradient($darkOrange);
}

.swatch.lightGreen {
 background:$lightGreen;
}

.swatch.green {
 background:$green;
}

.swatch.darkGreen {
 background:$darkGreen;
}

.swatch.yellow {
 background:$yellow;
}

.swatch.darkYellow {
 background:$darkYellow;
}

.swatch.orange {
 background:$orange;
}

.swatch.darkOrange {
 background:$darkOrange;
}