Quick overview of btn architecture

Btn architecture

// Basic gradient mixin which is located inside variables-and-mixins.scss
@mixin basic-gradient($start, $stop) {
  background: $start;
  background: -moz-linear-gradient(top,  $start 0%, $stop 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start), color-stop(100%,$stop));
  background: -webkit-linear-gradient(top,  $start 0%,$stop 100%);
  background: -o-linear-gradient(top,  $start 0%,$stop 100%);
  background: -ms-linear-gradient(top,  $start 0%,$stop 100%);
  background: linear-gradient(to bottom,  $start 0%,$stop 100%);
}

// Buttons.css.scss is in it's own module, which will get imported in to the global css.
.btn {
  display: inline-block;
  font-size: 1.6em;
  //padding: .8em 2em; I usually use em because it feels more flexible and easier to mantain
  padding: 12px 34px;
  background-color: red;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .1);

  border-radius: .4em;

  // Could change this to a box-shadow mixin
  -webkit-box-shadow: inset 0 1 2px rgba(0, 0, 0, .1); // needed for ios on 4.2-4.3 http://caniuse.com/#search=box-shadow
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);

  &:hover,
  &:focus {
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .4);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .4);
  }

  &:active {
    -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, .2);
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, .2);
  }
}

.btn--warning {
  background: #FFC100;

  &:hover,
  &:focus {
    @include basic-gradient(#FFC71A, #F8C21A);
  }

  &:active {
    @include basic-gradient(#E5AD00, #D7A300);
  }
}

.btn--danger {
  @include basic-gradient(#FF2C45, #FF2C45);

  &:hover,
  &:focus {
    @include basic-gradient(#FF4258, #F84156);
  }

  &:active {
    @include basic-gradient(#E5283E, #D7253A);
  }
}