Flat Buttons

gistfile1.scss

$white: #fff;
// $green: #45a14d;
// $green-darkened: #377f3d;
// $green-lightened: #46b850;
$green: #3a8741;
$green-darkened: #2a612f;
$green-lightened: #45a14d;
// $red: #8f3d3d;
// $red-darkened: #7F3636;
// $red-lightened: #9C4242;
$red: #753232;
$red-darkened: #4f2222;
$red-lightened: #8f3d3d;

@mixin flat-button-shadow($height, $color) {
  box-shadow: 0 $height 0 $color,
              0 $height $height rgba(0, 0, 0, .3);
}

@mixin flat-button(
  $background-color,
  $background-color-darkened,
  $background-color-lightened,
  $text-color) {

  @include flat-button-shadow(4px, $background-color-darkened);

  background: $background-color;
  color: $text-color;

  &:hover,
  &.activated {
    background-color: $background-color-lightened;
    top: 1px;

    @include flat-button-shadow(3px, $background-color-darkened);
  }

  &:focus,
  &:active,
  &.activated {
    top: 2px;

    @include flat-button-shadow(2px, $background-color-darkened);
  }

}

.button {
  display: inline-block;
  padding: 7px 20px; // default sizing
  position: relative;

  // animation
  // transition-duration: 100ms;
  // transition-property: top;
  //          background-color 100ms ease-in-out,
  //          box-shadow 100ms ease-in-out;

  & + & {
    margin-left: 10px;
  }
}

// button sizing
.button-xs {
  padding: 3px 6px;
}

.button-sm {
  padding: 4px 12px;
}

.button-md {
  padding: 5px 15px;
}

.button-lg {
  padding: 10px 35px;
}

// button color presets
.button-positive {
  @include flat-button($green-lightened, $green-darkened, $green, $white);
}

.button-negative {
  @include flat-button($red-lightened, $red-darkened, $red, $white);
}