Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// ----

// Inputs
%reset-input {
  background-color: transparent;
  border: none;
  margin: 0;
  padding: 0;
}

// Buttons
%reset-button {
  @extend %reset-input;
  -webkit-appearance: button;
  cursor: pointer;
  line-height: normal;
}

//************************************************************************//
// Button Styles
//************************************************************************//
%button-base {
  display: inline-block;
  background-color: green;
  border-radius: 0;
  cursor: pointer;
  font-size: 13px;
  padding: 10px 9px;

  &:hover,
  &:focus {
    background-color: orange;
  }

  &:active {
    background-color: red;
  }
}

// Internal Modifier
%button--small {
  padding: 5px;
}

%button--med {
  padding: 7px;
}

%button--large {
  padding: 10px;
}

button,
input[type="submit"] {
  @extend %reset-button;
  @extend %button-base;
}

.button {
  @extend %button-base;
  
  // Example modifiers
  &.-small {
    @extend %button--small;
  }

  &.-med {
    @extend %button--med;
  }

  &.-large {
    @extend %button--large;
  }

  &.disabled {
    cursor: not-allowed !important;
  }
}

// Custom button variation
.button--special {
  @extend %button-base;
  @extend %button--small;
}


// Prevent text shift in IE9+ (requires additional markup)
// http://stackoverflow.com/a/19593629/673457
button .inner-wrap {
  position: relative;
}

SassMeister-output.css

button,
input[type="submit"] {
  background-color: transparent;
  border: none;
  margin: 0;
  padding: 0;
}

button,
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
  line-height: normal;
}

button,
input[type="submit"], .button, .button--special {
  display: inline-block;
  background-color: green;
  border-radius: 0;
  cursor: pointer;
  font-size: 13px;
  padding: 10px 9px;
}
button:hover,
input[type="submit"]:hover, .button:hover, .button--special:hover, button:focus,
input[type="submit"]:focus, .button:focus, .button--special:focus {
  background-color: orange;
}
button:active,
input[type="submit"]:active, .button:active, .button--special:active {
  background-color: red;
}

.button.-small, .button--special {
  padding: 5px;
}

.button.-med {
  padding: 7px;
}

.button.-large {
  padding: 10px;
}

.button.disabled {
  cursor: not-allowed !important;
}

button .inner-wrap {
  position: relative;
}