Generated by SassMeister.com.

SassMeister-input-HTML.html

<a class="button active">Submit</a>
<a class="button">Default</a>
<a class="button cancel">Cancel</a>
<a class="button active disabled">Submit</a>
<input type="button" disabled="disabled" value="Disabled">
<input type="button" value="Enabled">

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// Color Schemer (v0.2.8)
// Toolkit (v2.5.0)
// ----

//////////////////////////////
// EXTENDABLES: For Base styles 
//////////////////////////////

@import "compass";
@import 'toolkit';  // tint-stack, shade-stack etc 
@import 'color-schemer';

// Example color scheme
  
$primary-color: #693 !default;
$grey-value: #333 !default;

$light-grey:  tint-stack($grey-value);
$primary:     tint-stack(cs-primary());
$secondary:   tint-stack(cs-secondary());
$tertiary:    tint-stack(cs-tertiary());
$quadrary:    tint-stack(cs-quadrary());
$dark-grey:   shade-stack(nth($light-grey, 2));

$body-font-family: 'Helvetica Neue', Arial, sans-serif;
$secondary-font: $body-font-family;

$button-padding: 0.33em .66em;
$button-border-color: nth($light-grey, 3);
$button-border-radius: .1875em;

$button-color: nth($light-grey, 1);
$button-text-shadow: 0 -1px 0 rgba(#fff, 0);

$button-gradient-stop-1: nth($light-grey, 5);
$button-gradient-stop-2: shade($button-gradient-stop-1, 3%);
$button-hover-color: $button-color;
$button-hover-gradient-stop-1: $button-gradient-stop-1;
$button-hover-gradient-stop-2: tint($button-gradient-stop-1, 3%);                                                  
$button-active-color: $button-color;
$button-active-gradient-stop-1: shade($button-gradient-stop-1, 3%);
$button-active-gradient-stop-2: $button-gradient-stop-1;

$button-action-gradient-stop-1: #693;
$button-action-gradient-stop-2: shade($button-action-gradient-stop-1, 3%);
$button-action-hover-gradient-stop-1: $button-action-gradient-stop-1;
$button-action-hover-gradient-stop-2: tint($button-action-gradient-stop-1, 5%);
$button-action-active-gradient-stop-1: shade($button-action-gradient-stop-1, 5%);
$button-action-active-gradient-stop-2: $button-action-gradient-stop-1;

$button-cancel-gradient-stop-1: #d61e16;
$button-cancel-gradient-stop-2: shade($button-cancel-gradient-stop-1, 5%);
$button-cancel-hover-gradient-stop-1: $button-cancel-gradient-stop-1;
$button-cancel-hover-gradient-stop-2: tint($button-cancel-gradient-stop-1, 5%);
$button-cancel-active-gradient-stop-1: shade($button-cancel-gradient-stop-1, 5%);
$button-cancel-active-gradient-stop-2: $button-cancel-gradient-stop-1;

$button-gradient-pos: 45deg;
$button-hover-gradient-pos: $button-gradient-pos;
$button-active-gradient-pos: $button-gradient-pos;
$button-action-gradient-pos: $button-gradient-pos;
$button-action-hover-gradient-pos: $button-gradient-pos;
$button-action-active-gradient-pos: $button-gradient-pos;
$button-cancel-gradient-pos: $button-gradient-pos;
$button-cancel-hover-gradient-pos: $button-gradient-pos;
$button-cancel-active-gradient-pos: $button-gradient-pos;
$button-disabled-gradient-pos: $button-gradient-pos;

//////////////////////////////
// DEFAULT VARIABLES
//////////////////////////////

/// Buttons
$button-font-family: $secondary-font !default;
$button-padding: 0.5em 1em !default;
$button-border-width: 1px !default; 
$button-border-style: solid !default;
$button-border-color: #666 !default;
$button-border-radius: 1em !default;
$button-color: #fff !default;
$button-text-shadow: 0 -1px 0 rgba(#fff, 0.25) !default;
$button-gradient-pos: top !default;
$button-gradient-stop-1: #47a !default;
$button-gradient-stop-2: #258 !default;
//// Hover & Focus
$button-hover-color: $button-color !default;
$button-hover-text-shadow: 0 -1px 0 rgba(#fff, 0.25) !default;
$button-hover-gradient-pos: $button-gradient-pos !default;
$button-hover-gradient-stop-1: #d04 !default;
$button-hover-gradient-stop-2: #b02 !default;
//// Active
$button-active-color: $button-color !default;
$button-active-text-shadow: -1px 0 0 rgba(#fff, 0.25) !default;
$button-active-gradient-pos: $button-gradient-pos !default;
$button-active-gradient-stop-1: #800 !default;
$button-active-gradient-stop-2: #a00 !default;
//// Action
$button-action-color: #fff !default;
$button-action-text-shadow: -1px -1px 0 rgba(#000, 0.25) !default;
$button-action-gradient-pos: $button-gradient-pos !default;
$button-action-gradient-stop-1: #007ae5 !default;
$button-action-gradient-stop-2: #005fb3 !default;
//// Action Hover & Focus
$button-action-hover-color: #fff !default;
$button-action-hover-text-shadow: -1px -1px 0 rgba(#000, 0.25) !default;
$button-action-hover-gradient-pos: $button-gradient-pos !default;
$button-action-hover-gradient-stop-1: #004480 !default;
$button-action-hover-gradient-stop-2: #004b8c !default;
//// Action Active
$button-action-active-color: #fff !default;
$button-action-active-text-shadow: -1px -1px 0 rgba(#000, 0.25) !default;
$button-action-active-gradient-pos: $button-gradient-pos !default;
$button-action-active-gradient-stop-1: #003059 !default;
$button-action-active-gradient-stop-2: #004b8c !default;
//// Cancel
$button-cancel-color: #fff !default;
$button-cancel-text-shadow: 0 -1px 0 rgba(#000, 0.25) !default;
$button-cancel-gradient-pos: $button-gradient-pos !default;
$button-cancel-gradient-stop-1: #ee5f5b !default;
$button-cancel-gradient-stop-2: #bd362f !default;
//// Cancel Hover & Focus
$button-cancel-hover-color: #fff !default;
$button-cancel-hover-text-shadow: -1px -1px 0 rgba(#000, 0.25) !default;
$button-cancel-hover-gradient-pos: $button-gradient-pos !default;
$button-cancel-hover-gradient-stop-1: #a32f29 !default;
$button-cancel-hover-gradient-stop-2: #d63e36 !default;
//// Cancel Active
$button-cancel-active-color: #fff !default;
$button-cancel-active-text-shadow: -1px -1px 0 rgba(#000, 0.25) !default;
$button-cancel-active-gradient-pos: $button-gradient-pos !default;
$button-cancel-active-gradient-stop-1: #7a231f !default;
$button-cancel-active-gradient-stop-2: #ad322b !default;
//// disabled
$button-disabled-color: #333 !default;
$button-disabled-opacity: .75 !default;
$button-disabled-text-shadow: 0 -1px 0 rgba(#000, 0.25) !default;
$button-disabled-gradient-pos: $button-gradient-pos !default;
$button-disabled-gradient-stop-1: #E6E6E6 !default;
$button-disabled-gradient-stop-2: #E6E6E6 !default;  

@mixin simple-background-gradient($color, $background-gradient-pos, $background-gradient-1, $background-gradient-2) {
  color: $color;
  // provide background color for older IEs
  background-color: background-color-mix($background-gradient-1, $background-gradient-2);
  @include background-image(linear-gradient($background-gradient-pos, $background-gradient-1, $background-gradient-2));
}

@mixin border-outline($type: border, $width: 1px, $style: solid, $color: #333, $offset: false) {
  @include border-outline-check($type, $width, $style, $color, $offset);
  @if $width == 'none' {
      #{$type}: $width;
  } @else if $width == false {
  } @else {
    #{$type}: {
      width: $width;
      style: $style;
      color: $color;
      @if $type == 'outline' and $offset {
        offset: $offset;
      }
    }
  }
}

@mixin border-outline-check($type, $width, $style, $color, $offset) {
  @if $type == 'border' and $offset {
    @warn "#{$type} does not use offset";
  }
  @if $type == 'outline' { // wish this was cleaner! there's probably a better way to do this.
    $widths: length($width);
    $styles: length($style);
    $colors: length($color);
    $offsets: length($offset);
    @if $widths > 1 or $styles > 1 or $colors > 1 or $offsets > 1   {
       @warn "You cannot use mulitple values for #{$type} - only the first value will be used!";
    }
  }  
}

@mixin margin-padding($type, $amount: false, $side: false) {
  @if $side {
    #{$type}-#{$side}: $amount;
  } @else {
    #{$type}: $amount;
  }
}

%btn-all {
  width: auto;
  text-align: center;
  font-family: $button-font-family;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  @include border-outline(border, $button-border-width, $button-border-style, $button-border-color);
  cursor: pointer;
  @include margin-padding(padding, $button-padding);
  line-height: 1;
  @include border-radius($button-border-radius);
}

%button {
  @extend %btn-all;
  @include simple-background-gradient($button-color, $button-gradient-pos, $button-gradient-stop-1, $button-gradient-stop-2);
  @include text-shadow($button-text-shadow);
  border-color: shade($button-gradient-stop-2, 15%);
  &:hover,
  &:focus {
    @include text-shadow($button-hover-text-shadow);
    @include simple-background-gradient($button-hover-color, $button-hover-gradient-pos, $button-hover-gradient-stop-1, $button-hover-gradient-stop-2);
  }  
  &:active {
    @include text-shadow($button-active-text-shadow);
    @include simple-background-gradient($button-active-color, $button-active-gradient-pos, $button-active-gradient-stop-1, $button-active-gradient-stop-2);
  }
}

%button-action {
  @extend %btn-all;
  @include text-shadow($button-action-text-shadow);
  @include simple-background-gradient($button-action-color, $button-action-gradient-pos, $button-action-gradient-stop-1, $button-action-gradient-stop-2);
  border-color: shade($button-action-gradient-stop-2, 15%);
  &:hover,
  &:focus {
    @include text-shadow($button-action-hover-text-shadow);
    @include simple-background-gradient($button-action-hover-color, $button-action-hover-gradient-pos, $button-action-hover-gradient-stop-1, $button-action-hover-gradient-stop-2);
  }
  &:active {
    @include text-shadow($button-action-active-text-shadow);
    @include simple-background-gradient($button-action-active-color, $button-action-active-gradient-pos, $button-action-active-gradient-stop-1, $button-action-active-gradient-stop-2);
  }
}

%button-cancel {
  @extend %btn-all;
  @include text-shadow($button-cancel-text-shadow);
  @include simple-background-gradient($button-cancel-color, $button-cancel-gradient-pos, $button-cancel-gradient-stop-1, $button-cancel-gradient-stop-2);
    border-color: shade($button-cancel-gradient-stop-2, 15%);
  &:hover,
  &:focus {
    @include text-shadow($button-cancel-hover-text-shadow);
    @include simple-background-gradient($button-cancel-hover-color, $button-cancel-hover-gradient-pos, $button-cancel-hover-gradient-stop-1, $button-cancel-hover-gradient-stop-2);
  }
  &:active {
    @include text-shadow($button-cancel-active-text-shadow);
    @include simple-background-gradient($button-cancel-active-color, $button-cancel-active-gradient-pos, $button-cancel-active-gradient-stop-1, $button-cancel-active-gradient-stop-2);
  }
}

%button-disabled {
  @extend %btn-all;
  @include text-shadow($button-disabled-text-shadow);
  opacity: $button-disabled-opacity;
  @include simple-background-gradient($button-disabled-color, $button-disabled-gradient-pos, $button-disabled-gradient-stop-1, $button-disabled-gradient-stop-2);
  border-color: shade($button-disabled-gradient-stop-2, 15%);
  // &:hover,
  // &:focus,
  // &:active {
  //   //@include text-shadow($button-disabled-text-shadow);
  //   //@extend %button-disabled;
  // } 
}

.button,
button,
input[type="button"],
input[type="submit"] {
  @extend %button;
} 

.button.active,
button.active,
input[type="button"].active,
input[type="submit"].active {
  @extend %button-action;
}

.button.cancel,
input.cancel,
button.cancel,
input[type="button"][value*="Cancel"],
input[type="submit"][value*="Cancel"] {
  @extend %button-cancel;
}

.button.disabled,
button[disabled="disabled"],
input[type="button"][disabled="disabled"],
input[type="submit"][disabled="disabled"],
.button.disabled.active,
button[disabled="disabled"].active,
input[type="button"][disabled="disabled"].active,
input[type="submit"][disabled="disabled"].active {
  @extend %button-disabled;
}

SassMeister-output.css

.button,
button,
input[type="button"],
input[type="submit"], .button.active,
button.active,
input[type="button"].active,
input[type="submit"].active, .button.cancel,
input.cancel,
button.cancel,
input[type="button"][value*="Cancel"],
input[type="submit"][value*="Cancel"], .button.disabled,
button[disabled="disabled"],
input[type="button"][disabled="disabled"],
input[type="submit"][disabled="disabled"],
.button.disabled.active,
button[disabled="disabled"].active,
input[type="button"][disabled="disabled"].active,
input[type="submit"][disabled="disabled"].active {
  width: auto;
  text-align: center;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  border-width: 1px;
  border-style: solid;
  border-color: #999999;
  cursor: pointer;
  padding: 0.33em 0.66em;
  line-height: 1;
  -moz-border-radius: 0.1875em;
  -webkit-border-radius: 0.1875em;
  border-radius: 0.1875em;
}

.button,
button,
input[type="button"],
input[type="submit"] {
  color: #333333;
  background-color: background-color-mix(#e0e0e0, #d9d9d9);
  background-image: -moz-linear-gradient(45deg, #e0e0e0, #d9d9d9);
  background-image: -webkit-linear-gradient(45deg, #e0e0e0, #d9d9d9);
  background-image: linear-gradient(45deg, #e0e0e0, #d9d9d9);
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0);
  border-color: #b8b8b8;
}
.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover, .button:focus,
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
  color: #333333;
  background-color: background-color-mix(#e0e0e0, #e0e0e0);
  background-image: -moz-linear-gradient(45deg, #e0e0e0, #e0e0e0);
  background-image: -webkit-linear-gradient(45deg, #e0e0e0, #e0e0e0);
  background-image: linear-gradient(45deg, #e0e0e0, #e0e0e0);
}
.button:active,
button:active,
input[type="button"]:active,
input[type="submit"]:active {
  text-shadow: -1px 0 0 rgba(255, 255, 255, 0.25);
  color: #333333;
  background-color: background-color-mix(#d9d9d9, #e0e0e0);
  background-image: -moz-linear-gradient(45deg, #d9d9d9, #e0e0e0);
  background-image: -webkit-linear-gradient(45deg, #d9d9d9, #e0e0e0);
  background-image: linear-gradient(45deg, #d9d9d9, #e0e0e0);
}

.button.active,
button.active,
input[type="button"].active,
input[type="submit"].active {
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.25);
  color: white;
  background-color: background-color-mix(#669933, #629431);
  background-image: -moz-linear-gradient(45deg, #669933, #629431);
  background-image: -webkit-linear-gradient(45deg, #669933, #629431);
  background-image: linear-gradient(45deg, #669933, #629431);
  border-color: #537d29;
}
.button.active:hover,
button.active:hover,
input[type="button"].active:hover,
input[type="submit"].active:hover, .button.active:focus,
button.active:focus,
input[type="button"].active:focus,
input[type="submit"].active:focus {
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.25);
  color: white;
  background-color: background-color-mix(#669933, #6d9e3d);
  background-image: -moz-linear-gradient(45deg, #669933, #6d9e3d);
  background-image: -webkit-linear-gradient(45deg, #669933, #6d9e3d);
  background-image: linear-gradient(45deg, #669933, #6d9e3d);
}
.button.active:active,
button.active:active,
input[type="button"].active:active,
input[type="submit"].active:active {
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.25);
  color: white;
  background-color: background-color-mix(#609130, #669933);
  background-image: -moz-linear-gradient(45deg, #609130, #669933);
  background-image: -webkit-linear-gradient(45deg, #609130, #669933);
  background-image: linear-gradient(45deg, #609130, #669933);
}

.button.cancel,
input.cancel,
button.cancel,
input[type="button"][value*="Cancel"],
input[type="submit"][value*="Cancel"] {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  color: white;
  background-color: background-color-mix(#d61e16, #cb1c14);
  background-image: -moz-linear-gradient(45deg, #d61e16, #cb1c14);
  background-image: -webkit-linear-gradient(45deg, #d61e16, #cb1c14);
  background-image: linear-gradient(45deg, #d61e16, #cb1c14);
  border-color: #ac1711;
}
.button.cancel:hover,
input.cancel:hover,
button.cancel:hover,
input[type="button"][value*="Cancel"]:hover,
input[type="submit"][value*="Cancel"]:hover, .button.cancel:focus,
input.cancel:focus,
button.cancel:focus,
input[type="button"][value*="Cancel"]:focus,
input[type="submit"][value*="Cancel"]:focus {
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.25);
  color: white;
  background-color: background-color-mix(#d61e16, #d82921);
  background-image: -moz-linear-gradient(45deg, #d61e16, #d82921);
  background-image: -webkit-linear-gradient(45deg, #d61e16, #d82921);
  background-image: linear-gradient(45deg, #d61e16, #d82921);
}
.button.cancel:active,
input.cancel:active,
button.cancel:active,
input[type="button"][value*="Cancel"]:active,
input[type="submit"][value*="Cancel"]:active {
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.25);
  color: white;
  background-color: background-color-mix(#cb1c14, #d61e16);
  background-image: -moz-linear-gradient(45deg, #cb1c14, #d61e16);
  background-image: -webkit-linear-gradient(45deg, #cb1c14, #d61e16);
  background-image: linear-gradient(45deg, #cb1c14, #d61e16);
}

.button.disabled,
button[disabled="disabled"],
input[type="button"][disabled="disabled"],
input[type="submit"][disabled="disabled"],
.button.disabled.active,
button[disabled="disabled"].active,
input[type="button"][disabled="disabled"].active,
input[type="submit"][disabled="disabled"].active {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  opacity: 0.75;
  color: #333333;
  background-color: background-color-mix(#e6e6e6, #e6e6e6);
  background-image: -moz-linear-gradient(45deg, #e6e6e6, #e6e6e6);
  background-image: -webkit-linear-gradient(45deg, #e6e6e6, #e6e6e6);
  background-image: linear-gradient(45deg, #e6e6e6, #e6e6e6);
  border-color: #c3c3c3;
}

SassMeister-rendered.html

<a class="button active">Submit</a>
<a class="button">Default</a>
<a class="button cancel">Cancel</a>
<a class="button active disabled">Submit</a>
<input type="button" disabled="disabled" value="Disabled">
<input type="button" value="Enabled">