pixelwhip.scss

// Button base
// ------------

%button {
  @inlude inline-block;

  &:hover {
    text-decoration: none;
  }
}

// Button sizes
// ------------

%button-small {
  @include adjust-font-size-to($fs-xxs);
  @include border-radius(22px);
  font-weight: bold;
  text-transform: uppercase;
  padding: rhythm(.5, $fs-xxs) 9px;
}

%button-medium {
  @include adjust-font-size-to($fs-s);
  @include border-radius(35px);
  font-weight: bold;
  padding: rhythm(1, $fs-s) 18px;
}

%button-large {
  @include adjust-font-size-to($fs-l);
  @include border-radius(35px);
  font-weight: bold;
  padding: rhythm(1, $fs-l) 18px;
}

// Button colors
// -------------

%button-white {
  @include background-image(linear-gradient(top, $gray-white $gray-lightest));
  @include box-shadow(  $white 0 0 1px inset,
                        rgba($gray-dark, .6) 0 0px 1px);
  @include link-colors($gray-dark, $gray-darker);
  border-color: $gray-light $gray-light $gray;

  &:hover {
    @include background-image(linear-gradient(top, $white $gray-white));
  }

  &:active {
    @include background-image(linear-gradient(top, $gray $gray-lightest ));
    @include box-shadow($gray-dark 0 1px 2px inset);
  }
}

%button-teal {
  @include background-image(linear-gradient(top, $teal-lighter $teal-darker));
  @include link-colors($white);
  border-color: $teal-darker $teal-darkest $teal-darkest;
}

// Button text effects
// -------------

%button-text-embossed {
  @include text-shadow(0 -1px 0 #A3A3A3);
}

%button-text-debossed {
  @include text-shadow(0 -1px 0 rgba($white, .4));
}

// Button icons
// ------------

@mixin button-icon($x-size: 18px, $y-size: 18px) {
  @include inline-block;
  content: "";
  position: relative;
  width: $x-size;
  height: $y-size;
  background-color: red;
}

%button-icon-before {
  &:before {
    @include button-icon();
    top: -1px;
    margin-right: 4px;
  }
}

%button-icon-after {
  &:after {
    @include button-icon();
    top: -1px;
    margin-left: 4px;
  }
}

%button-icon-before-large {
  &:before {
    @include button-icon(26px, 26px);
    top: -1px;
    margin-right: 8px;
  }
}

%button-icon-after-large {
  &:after {
    @include button-icon(26px, 26px);
    top: -1px;
    margin-left: 8px;
  }
}

// Download Button
.download-link {
  @extend %button;
  @extend %button-small;
  @extend %button-white;
  @extend %button-icon-after;
}