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

@import "compass";

$button-color: #666;
$button-background: #ddd;
$button-shadow: rgba(mix(invert($button-color), $button-background, 75%), 1);

$button-padding: 0.33em .66em;
$button-border-color: transparent;
$button-border-radius: .1875em;
$button-background-color-offset: 5%;

$button-text-shadow: 0 -1px 0 rgba(#fff, 0);
$button-font-family: sans-serif;
$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-text-shadow: 0 -1px 0 rgba(#fff, 0.25) !default;
$button-gradient-pos: top;


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

@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 simple-background-gradient($color, $background-gradient-pos, $background-gradient-1, $background-gradient-2) {
  color: $color;
  // provide background color for older IEs
  background-color: mix($background-gradient-1, $background-gradient-2);
  @include background-image(linear-gradient($background-gradient-pos, $background-gradient-1, $background-gradient-2));
}

@mixin button-theme($button-color, $button-background, $button-gradient-pos: top, $button-background-color-offset: 3%, $disabled: false, $button-text-shadow: 0 -1px 0) {
  
  $button-gradient-stop-2: shade($button-background, $button-background-color-offset);
  $button-hover-gradient-stop-2: tint($button-background, $button-background-color-offset);                                                  
  $button-active-gradient-stop-1: shade($button-background, $button-background-color-offset);
  $button-dark-color: shade($button-gradient-stop-2, 15%);
  $button-shadow-color: rgba( mix( invert($button-color), $button-background, 75%), .75);
  
  @extend %btn-all;
  
  @include simple-background-gradient($button-color, $button-gradient-pos, $button-background, $button-gradient-stop-2);
  @include text-shadow($button-text-shadow, $button-shadow-color);
  border-color: $button-dark-color;
  @if $disabled { opacity: .75;}
  @if $disabled == false {
  &:hover,
  &:focus {
    @include simple-background-gradient($button-color, $button-gradient-pos, $button-background, $button-hover-gradient-stop-2);
  }  
  &:active {
    @include simple-background-gradient($button-color, $button-gradient-pos, $button-active-gradient-stop-1, $button-background);
  }
  }
}

%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 button-theme($button-color, $button-background,  $button-gradient-pos, $button-background-color-offset, true);
}

.button, input {
  // color: $button-color;
  // text-shadow: 0 -1px 0 $button-shadow;
  // background: $button-background;
  // padding: 5px 10px;
  // font-family: sans-serif;
  // font-size: 1em;
  // font-weight: normal;
  // font-style: normal;
  @extend %button;
  }
  

SassMeister-output.css

.button, input {
  width: auto;
  text-align: center;
  font-family: sans-serif;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  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, input {
  color: #666666;
  background-color: #d7d7d7;
  background-image: -moz-linear-gradient(top, #dddddd, #d1d1d1);
  background-image: -webkit-linear-gradient(top, #dddddd, #d1d1d1);
  background-image: linear-gradient(to bottom, #dddddd, #d1d1d1);
  text-shadow: 0 -1px 0, rgba(170, 170, 170, 0.75);
  border-color: #b1b1b1;
  opacity: .75;
}

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