Generated by SassMeister.com, the Sass playground.

SassMeister-input.scss

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


@mixin button-base {
  border-radius: 0.2em;
  border: {
    width: 1px;
    style: solid;
  }
  font: {
    family: sans-serif;
    weight: normal;
    size: 0.9rem;
  }
  line-height: 1.25;
  text-transform: uppercase;
  padding: 0.2em 0.5em;
}
@mixin button-colors($button-color: #ECECEC, $button-text-color: #2d2d2d) {
  color: $button-text-color;
  background: {
    color: $button-color;
  }
  border: {
    color: adjust-color($button-color, $lightness: -10%)
  }
  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-base;
  @include button-colors();
}
%button-cta {
  @extend %button;
  @include button-colors($button-color: #bada55);
}

%button-coffee {
  @include button-base;
  @include button-colors($button-color: #c0ffee);
}

%full-width {
  width: 100%;
}


input[type="submit"] {
  @extend %button;
}
input[type="reset"] {
  @extend %button;
}
button {
  @extend %button;
  @media (min-width: 32em) {
    @include button-base;
    @include button-colors($button-color: #c0ffee);
  }
}

.cta {
  input[type="submit"] {
    @extend %button-cta;
  }
  @media (min-width: 32em) {
    @include button-base;
    @include button-colors($button-color: #c0ffee);
    width: 100%;
  }
}

SassMeister-output.css

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

@media (min-width: 32em) {
  button {
    border-radius: 0.2em;
    border-width: 1px;
    border-style: solid;
    font-family: sans-serif;
    font-weight: normal;
    font-size: 0.9rem;
    line-height: 1.25;
    text-transform: uppercase;
    padding: 0.2em 0.5em;
    color: #2d2d2d;
    background-color: #c0ffee;
    border-color: #8dffe0;
    text-shadow: white 1px 1px 0;
  }
  button:hover {
    background-color: #dafff5;
  }
  button:active {
    background-color: #f3fffc;
  }
}

@media (min-width: 32em) {
  .cta {
    border-radius: 0.2em;
    border-width: 1px;
    border-style: solid;
    font-family: sans-serif;
    font-weight: normal;
    font-size: 0.9rem;
    line-height: 1.25;
    text-transform: uppercase;
    padding: 0.2em 0.5em;
    color: #2d2d2d;
    background-color: #c0ffee;
    border-color: #8dffe0;
    text-shadow: white 1px 1px 0;
    width: 100%;
  }
  .cta:hover {
    background-color: #dafff5;
  }
  .cta:active {
    background-color: #f3fffc;
  }
}