Generated by SassMeister.com, the Sass playground.

SassMeister-input.scss

// ---
// Sass (v3.2.9)
// ---


@mixin button($button-color: #ECECEC, $button-text-color: #2d2d2d) {
  border-radius: 0.2em;
  color: $button-text-color;
  background: {
    color: $button-color;
  }
  border: {
    width: 1px;
    style: solid;
    color: adjust-color($button-color, $lightness: -10%)
  }
  font: {
    family: sans-serif;
    weight: normal;
    size: 0.9rem;
  }
  line-height: 1.25;
  text-transform: uppercase;
  padding: 0.2em 0.5em;
  text-shadow: adjust-color($button-color, $lightness: 15%) 1px 1px 0;
  &:hover {
    background: {
      color: adjust-color($button-color, $lightness: 5%);
    }
  }
  &:active {
    background: {
      color: adjust-color($button-color, $lightness: 10%);
    }
  }
}

%button {
  @include button;
}
%button-cta {
  @include button($button-color: #bada55);
}



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

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

SassMeister-output.css

input[type="submit"], input[type="reset"], button {
  border-radius: 0.2em;
  color: #2d2d2d;
  background-color: #ececec;
  border-width: 1px;
  border-style: solid;
  border-color: lightgrey;
  font-family: sans-serif;
  font-weight: normal;
  font-size: 0.9rem;
  line-height: 1.25;
  text-transform: uppercase;
  padding: 0.2em 0.5em;
  text-shadow: white 1px 1px 0;
}
input[type="submit"]:hover, input[type="reset"]:hover, button:hover {
  background-color: #f9f9f9;
}
input[type="submit"]:active, input[type="reset"]:active, button:active {
  background-color: white;
}

.cta input[type="submit"] {
  border-radius: 0.2em;
  color: #2d2d2d;
  background-color: #bada55;
  border-width: 1px;
  border-style: solid;
  border-color: #a8cf2d;
  font-family: sans-serif;
  font-weight: normal;
  font-size: 0.9rem;
  line-height: 1.25;
  text-transform: uppercase;
  padding: 0.2em 0.5em;
  text-shadow: #d3e894 1px 1px 0;
}
.cta input[type="submit"]:hover {
  background-color: #c2df6a;
}
.cta input[type="submit"]:active {
  background-color: #cbe37f;
}