Generated by SassMeister.com.

SassMeister-input-HTML.html

<a class="btn" href="#">Button</a>
<a class="btn btn-primary" href="#">Button</a>
<a class="btn btn-secondary" href="#">Button</a>
<a class="btn btn-success" href="#">Button</a>
<a class="btn btn-info" href="#">Button</a>
<a class="btn btn-alert" href="#">Button</a>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

// Main UI Colors
$primary-color: #3BA9E4;
$secondary-color: tomato;
$success-color: #75B343;
$info-color: #9A68C7;
$alert-color: red;
$toggle-btn-gradient: false; // Do you want button with gradients? Use true

// Button Base Color
$btn-font-size            : 1rem;
$btn-font-weight          : 300;
$btn-color-base           : #e1e1e1;
$btn-color-shadow         : rgba(255, 255, 255, 0.5);
$btn-color-text           : #2B2B2B;
$btn-color-text-shadow    : white;
$btn-gradient-first       : #fbfbfb;
$btn-gradient-last        : #e1e1e1;
$btn-border-width         : 1px; // set to false if you don't need border
$btn-text-shadow-opacity  : 0.35;
$btn-has-shadow           : true;
$btn-shadow-opacity       : 0.15;
$btn-border-radius        : 5px;
$btn-horizontal-padding   : 2em;
$btn-vertical-padding     : .5em;
$btn-line-height          : false; // set to false if you don't need line-height


// Button Theme Settings
$btn-tint: 15%;
$btn-shade: 5%;
$btn-border-color-percentage: 10%; 
$btn-active-percentage: 10%;
$btn-active-color-percentage: 30%;


// Add percentage of white to a color
@function tint($color, $percent){
  @return mix(white, $color, $percent);
}

// Add percentage of black to a color
@function shade($color, $percent){
  @return mix(black, $color, $percent);
}

@mixin btn-theme($btn-color, $btn-gradient: $toggle-btn-gradient) {
  @if $btn-gradient == true {
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, tint($btn-color, $btn-tint)), color-stop(100%, shade($btn-color, $btn-shade)));
    background: -webkit-linear-gradient(top, tint($btn-color, $btn-tint), shade($btn-color, $btn-shade));
    background: -moz-linear-gradient(top, tint($btn-color, $btn-tint), shade($btn-color, $btn-shade));
    background: -o-linear-gradient(top, tint($btn-color, $btn-tint), shade($btn-color, $btn-shade));
    background: linear-gradient(top, tint($btn-color, $btn-tint), shade($btn-color, $btn-shade));
  }
  background-color: $btn-color;
  @if $btn-border-width {border-color: shade($btn-color, $btn-border-color-percentage); }
  color: white;
  text-shadow: 0 -1px 1px rgba(0, 40, 50, $btn-text-shadow-opacity);

  &:hover {
    background-color: tint($btn-color, $btn-tint);
    @if $btn-gradient == true {
      background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, tint($btn-color, $btn-tint)), color-stop(100%, $btn-color));
      background: -webkit-linear-gradient(top, tint($btn-color, $btn-tint), $btn-color);
      background: -moz-linear-gradient(top, tint($btn-color, $btn-tint), $btn-color);
      background: -o-linear-gradient(top, tint($btn-color, $btn-tint), $btn-color);
      background: linear-gradient(top, tint($btn-color, $btn-tint), $btn-color);
    }
  }

  &:active {
    background: shade($btn-color, $btn-active-percentage);
    color: shade($btn-color, $btn-active-color-percentage);
  }
}


.btn,
a.btn,
button.btn,
input.btn {
  background-color: $btn-color-base;
  // Top to bottom gradient
  @if $toggle-btn-gradient == true {
    background: -webkit-linear-gradient(top, $btn-gradient-first, $btn-gradient-last);
    background: -o-linear-gradient(top, $btn-gradient-first, $btn-gradient-last);
    background: -moz-linear-gradient(top, $btn-gradient-first, $btn-gradient-last);
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, $btn-gradient-first), color-stop(100%, $btn-gradient-last));
    background: linear-gradient(top, $btn-gradient-first, $btn-gradient-last);
  }
  @if $btn-has-shadow == true {
    -webkit-box-shadow: inset 0px 1px 0px $btn-color-shadow, 0px 1px 2px rgba(0, 0, 0, $btn-shadow-opacity);
    -moz-box-shadow: inset 0px 1px 0px $btn-color-shadow, 0px 1px 2px rgba(0, 0, 0, $btn-shadow-opacity);
    box-shadow: inset 0px 1px 0px $btn-color-shadow, 0px 1px 2px rgba(0, 0, 0, $btn-shadow-opacity);
  }
  @if $btn-border-width { border: $btn-border-width solid shade($btn-color-base, 10); }
  border-radius: $btn-border-radius;

  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;

  // ie hacks and fixes (fuck you ie)
  *vertical-align: auto;
  zoom: 1;
  *display: inline;

  // height: rem(2rem);
  @if line-height { line-height: $btn-line-height; }
  
  padding: $btn-vertical-padding $btn-horizontal-padding;
  margin: 0;

  font-weight: $btn-font-weight;
  font-size: $btn-font-size;
  font-family: "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
  color: $btn-color-text;
  text-shadow: 0 1px 1px $btn-color-text-shadow;

  text-decoration: none;
  text-align: center;
  cursor:pointer;
  &:hover {
    background-color: tint($btn-color-base, 40%);
    @if $toggle-btn-gradient == true {
      background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dcdcdc));
      background: -webkit-linear-gradient(top, #ffffff, #dcdcdc);
      background: -moz-linear-gradient(top, #ffffff, #dcdcdc);
      background: -o-linear-gradient(top, #ffffff, #dcdcdc);
      background: linear-gradient(top, #ffffff, #dcdcdc);
    }
  }
  &:active {
    @if $toggle-btn-gradient == true {
      -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white;
      -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white;
      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white;
    }
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4);
    background: shade($btn-color-base, 5%);
    color: black;
  }
  &:focus{
    outline: none;
  }
}

$colors: (
  primary   : $primary-color,
  secondary : $secondary-color,
  success   : $success-color,
  info      : $info-color,
  alert     : $alert-color
);

@each $name, $color in $colors {
  .btn-#{$name},
  a.btn-#{$name},
  button.btn-#{$name},
  input.btn-#{$name}   { @include btn-theme($color); }
}

SassMeister-output.css

.btn,
a.btn,
button.btn,
input.btn {
  background-color: #e1e1e1;
  -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
  border: 1px solid #cacaca;
  border-radius: 5px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  line-height: false;
  padding: 0.5em 2em;
  margin: 0;
  font-weight: 300;
  font-size: 1rem;
  font-family: "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
  color: #2B2B2B;
  text-shadow: 0 1px 1px white;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.btn:hover,
a.btn:hover,
button.btn:hover,
input.btn:hover {
  background-color: #ededed;
}
.btn:active,
a.btn:active,
button.btn:active,
input.btn:active {
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4);
  background: #d5d5d5;
  color: black;
}
.btn:focus,
a.btn:focus,
button.btn:focus,
input.btn:focus {
  outline: none;
}

.btn-primary,
a.btn-primary,
button.btn-primary,
input.btn-primary {
  background-color: #3BA9E4;
  border-color: #3598cd;
  color: white;
  text-shadow: 0 -1px 1px rgba(0, 40, 50, 0.35);
}
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
input.btn-primary:hover {
  background-color: #58b5e8;
}
.btn-primary:active,
a.btn-primary:active,
button.btn-primary:active,
input.btn-primary:active {
  background: #3598cd;
  color: #29769f;
}

.btn-secondary,
a.btn-secondary,
button.btn-secondary,
input.btn-secondary {
  background-color: tomato;
  border-color: #e5593f;
  color: white;
  text-shadow: 0 -1px 1px rgba(0, 40, 50, 0.35);
}
.btn-secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover,
input.btn-secondary:hover {
  background-color: #ff7a62;
}
.btn-secondary:active,
a.btn-secondary:active,
button.btn-secondary:active,
input.btn-secondary:active {
  background: #e5593f;
  color: #b24531;
}

.btn-success,
a.btn-success,
button.btn-success,
input.btn-success {
  background-color: #75B343;
  border-color: #69a13c;
  color: white;
  text-shadow: 0 -1px 1px rgba(0, 40, 50, 0.35);
}
.btn-success:hover,
a.btn-success:hover,
button.btn-success:hover,
input.btn-success:hover {
  background-color: #89be5f;
}
.btn-success:active,
a.btn-success:active,
button.btn-success:active,
input.btn-success:active {
  background: #69a13c;
  color: #517d2e;
}

.btn-info,
a.btn-info,
button.btn-info,
input.btn-info {
  background-color: #9A68C7;
  border-color: #8a5db3;
  color: white;
  text-shadow: 0 -1px 1px rgba(0, 40, 50, 0.35);
}
.btn-info:hover,
a.btn-info:hover,
button.btn-info:hover,
input.btn-info:hover {
  background-color: #a97ecf;
}
.btn-info:active,
a.btn-info:active,
button.btn-info:active,
input.btn-info:active {
  background: #8a5db3;
  color: #6b488b;
}

.btn-alert,
a.btn-alert,
button.btn-alert,
input.btn-alert {
  background-color: red;
  border-color: #e50000;
  color: white;
  text-shadow: 0 -1px 1px rgba(0, 40, 50, 0.35);
}
.btn-alert:hover,
a.btn-alert:hover,
button.btn-alert:hover,
input.btn-alert:hover {
  background-color: #ff2626;
}
.btn-alert:active,
a.btn-alert:active,
button.btn-alert:active,
input.btn-alert:active {
  background: #e50000;
  color: #b20000;
}

SassMeister-rendered.html

<a class="btn" href="#">Button</a>
<a class="btn btn-primary" href="#">Button</a>
<a class="btn btn-secondary" href="#">Button</a>
<a class="btn btn-success" href="#">Button</a>
<a class="btn btn-info" href="#">Button</a>
<a class="btn btn-alert" href="#">Button</a>