Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.7)
// Compass (v)
// ----

@import 'compass';

$btn-colors: (

  default: (
    default: (
      top: #226bfb,
      bottom: #0f53e2,
      border: #014de6,
    ),
    hover: (
      top: #1552cc,
      bottom: #003db8,
      border: #013eb8
    ),
    active: (
      top: #103d99,
      bottom: #002e8a,
      border: #012e8a
    )
  ),

  action: (
    default: (
      top: #34ae23,
      bottom: #1a9509,
      border: #1b9509,
    ),
    hover: (
      top: #2a8b1c,
      bottom: #157708,
      border: #167707
    ),
    active: (
      top: #1f6915,
      bottom: #105906,
      border: #105905
    )
  ),

  warn: (
    default: (
      top: #888888,
      bottom: #6f6f6f,
      border: #6f6f6f
    ),
    hover: (
      top: #6d6d6d,
      bottom: #595959,
      border: #595959
    ),
    active: (
      top: #525252,
      bottom: #434343,
      border: #434343
    )
  ),

  alert: (
    default: (
      top: #f13030,
      bottom: #d71616,
      border: #d71616,
    ),
    hover: (
      top: #c12626,
      bottom: #ac1212,
      border: #ac1212
    ),
    active: (
      top: #901d1d,
      bottom: #810d0d,
      border: #810d0d
    )
  ),

  dim: (
    default: (
      top: #fff,
      bottom: #f7f7f7,
      border: #dddddd,
    ),
    hover: (
      top: #f2f2f2,
      bottom: #ebebeb,
      border: #d2d2d2
    ),
    active: (
      top: #d9d9d9,
      bottom: #d2d2d2,
      border: #bdbdbd
    )
  )

);

$btn-types: map-keys($btn-colors);

@function map-me($map, $keys) {
  
  @return map-me-r($map, $keys); 
  
  @each $key in $keys {
    
    @if map-has-key($map, $key) {
      $map: map-get($map, $key);
    }
    
  } // each key
  
  @return $map;
  
} // @function map-me

@function map-me-r($map, $keys) {

  @if length($keys) == 0 or length($map) == 0 {
    @warn 'Check your arguments, dawg!';
    @return null;
  }

  // get first key from list
  $key: nth($keys, 1);

  // get the value of $key from $map
  @if map-has-key($map, $key) {
    $map: map-get($map, $key);
  }

  // if this is the last $key in the list of $keys, return out $map value - there are no further keys to check
  @if length($keys) == 1 {
    @return $map;
  }

  // otherwise, continue drilling down into our map
  // remove the first key from $keys to pass onto the next iteration of this function
  $tmp-keys: $keys;
  $keys: ();
  @for $i from 2 through length($tmp-keys) {
    $keys: append($keys, nth($tmp-keys, $i));
  }

  @return map-me-r($map, $keys);

} // @function map-me-r

@mixin button($type) {

  @include background(
    linear-gradient(
      map-me($btn-colors, $type default top),
      map-me($btn-colors, $type default bottom)
    )
  );
  border-color: map-me($btn-colors, $type default border);

  &:hover,
  &:focus {
    @include background(
      linear-gradient(
        map-me($btn-colors, $type hover top),
        map-me($btn-colors, $type hover bottom)
      )
    );
    border-color: map-me($btn-colors, $type hover border);
  }

  &:active {
    @include background(
      linear-gradient(
        map-me($btn-colors, $type active top),
        map-me($btn-colors, $type active bottom)
      )
    );
    border-color: map-me($btn-colors, $type active border);
  }

  &[disabled] {

    &,
    &:hover,
    &:active,
    &:focus {
      @include background(
        linear-gradient(
          map-me($btn-colors, $type default top),
          map-me($btn-colors, $type default bottom)
        )
      );
      border-color: map-me($btn-colors, $type default border);
    }

  } // &[disabled]

} // @mixin button

// Iterate over all types of buttons to generate their styles.
@each $type in $btn-types {

  .btn-#{$type} {
    @include button($type);
  }

} // each type

SassMeister-output.css

.btn-default {
  background: -moz-linear-gradient(#226bfb, #0f53e2);
  background: -webkit-linear-gradient(#226bfb, #0f53e2);
  background: linear-gradient(#226bfb, #0f53e2);
  border-color: #014de6;
}
.btn-default:hover, .btn-default:focus {
  background: -moz-linear-gradient(#1552cc, #003db8);
  background: -webkit-linear-gradient(#1552cc, #003db8);
  background: linear-gradient(#1552cc, #003db8);
  border-color: #013eb8;
}
.btn-default:active {
  background: -moz-linear-gradient(#103d99, #002e8a);
  background: -webkit-linear-gradient(#103d99, #002e8a);
  background: linear-gradient(#103d99, #002e8a);
  border-color: #012e8a;
}
.btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:active, .btn-default[disabled]:focus {
  background: -moz-linear-gradient(#226bfb, #0f53e2);
  background: -webkit-linear-gradient(#226bfb, #0f53e2);
  background: linear-gradient(#226bfb, #0f53e2);
  border-color: #014de6;
}

.btn-action {
  background: -moz-linear-gradient(#34ae23, #1a9509);
  background: -webkit-linear-gradient(#34ae23, #1a9509);
  background: linear-gradient(#34ae23, #1a9509);
  border-color: #1b9509;
}
.btn-action:hover, .btn-action:focus {
  background: -moz-linear-gradient(#2a8b1c, #157708);
  background: -webkit-linear-gradient(#2a8b1c, #157708);
  background: linear-gradient(#2a8b1c, #157708);
  border-color: #167707;
}
.btn-action:active {
  background: -moz-linear-gradient(#1f6915, #105906);
  background: -webkit-linear-gradient(#1f6915, #105906);
  background: linear-gradient(#1f6915, #105906);
  border-color: #105905;
}
.btn-action[disabled], .btn-action[disabled]:hover, .btn-action[disabled]:active, .btn-action[disabled]:focus {
  background: -moz-linear-gradient(#34ae23, #1a9509);
  background: -webkit-linear-gradient(#34ae23, #1a9509);
  background: linear-gradient(#34ae23, #1a9509);
  border-color: #1b9509;
}

.btn-warn {
  background: -moz-linear-gradient(#888888, #6f6f6f);
  background: -webkit-linear-gradient(#888888, #6f6f6f);
  background: linear-gradient(#888888, #6f6f6f);
  border-color: #6f6f6f;
}
.btn-warn:hover, .btn-warn:focus {
  background: -moz-linear-gradient(#6d6d6d, #595959);
  background: -webkit-linear-gradient(#6d6d6d, #595959);
  background: linear-gradient(#6d6d6d, #595959);
  border-color: #595959;
}
.btn-warn:active {
  background: -moz-linear-gradient(#525252, #434343);
  background: -webkit-linear-gradient(#525252, #434343);
  background: linear-gradient(#525252, #434343);
  border-color: #434343;
}
.btn-warn[disabled], .btn-warn[disabled]:hover, .btn-warn[disabled]:active, .btn-warn[disabled]:focus {
  background: -moz-linear-gradient(#888888, #6f6f6f);
  background: -webkit-linear-gradient(#888888, #6f6f6f);
  background: linear-gradient(#888888, #6f6f6f);
  border-color: #6f6f6f;
}

.btn-alert {
  background: -moz-linear-gradient(#f13030, #d71616);
  background: -webkit-linear-gradient(#f13030, #d71616);
  background: linear-gradient(#f13030, #d71616);
  border-color: #d71616;
}
.btn-alert:hover, .btn-alert:focus {
  background: -moz-linear-gradient(#c12626, #ac1212);
  background: -webkit-linear-gradient(#c12626, #ac1212);
  background: linear-gradient(#c12626, #ac1212);
  border-color: #ac1212;
}
.btn-alert:active {
  background: -moz-linear-gradient(#901d1d, #810d0d);
  background: -webkit-linear-gradient(#901d1d, #810d0d);
  background: linear-gradient(#901d1d, #810d0d);
  border-color: #810d0d;
}
.btn-alert[disabled], .btn-alert[disabled]:hover, .btn-alert[disabled]:active, .btn-alert[disabled]:focus {
  background: -moz-linear-gradient(#f13030, #d71616);
  background: -webkit-linear-gradient(#f13030, #d71616);
  background: linear-gradient(#f13030, #d71616);
  border-color: #d71616;
}

.btn-dim {
  background: -moz-linear-gradient(#ffffff, #f7f7f7);
  background: -webkit-linear-gradient(#ffffff, #f7f7f7);
  background: linear-gradient(#ffffff, #f7f7f7);
  border-color: #dddddd;
}
.btn-dim:hover, .btn-dim:focus {
  background: -moz-linear-gradient(#f2f2f2, #ebebeb);
  background: -webkit-linear-gradient(#f2f2f2, #ebebeb);
  background: linear-gradient(#f2f2f2, #ebebeb);
  border-color: #d2d2d2;
}
.btn-dim:active {
  background: -moz-linear-gradient(#d9d9d9, #d2d2d2);
  background: -webkit-linear-gradient(#d9d9d9, #d2d2d2);
  background: linear-gradient(#d9d9d9, #d2d2d2);
  border-color: #bdbdbd;
}
.btn-dim[disabled], .btn-dim[disabled]:hover, .btn-dim[disabled]:active, .btn-dim[disabled]:focus {
  background: -moz-linear-gradient(#ffffff, #f7f7f7);
  background: -webkit-linear-gradient(#ffffff, #f7f7f7);
  background: linear-gradient(#ffffff, #f7f7f7);
  border-color: #dddddd;
}