Buttons for Dean

buttons.scss

$blue: #4c97cf;
$tan: #d7c795;
$button-color: $blue;
$back-button-color: $tan;

.main-button {
  color: #fff;
  font-weight: normal;
  @include linear-gradient($button-color, darken($button-color, 15));
  box-shadow: 0 2px 3px rgba(#000, .7), 0 -1px 0 lighten($button-color, 10);
  text-shadow: 0 -1px 0 darken($button-color, 25);

  &:hover {
    @include linear-gradient(darken($button-color, 5), darken($button-color, 20));
  }
}

.back-button {
  color: #fff;
  font-weight: normal;
  @include linear-gradient($back-button-color, darken($back-button-color, 8));
  box-shadow: 0 2px 3px rgba(#000, .7), 0 1px 0 lighten($back-button-color, 10), 0 -1px 0 darken($back-button-color, 10);
  text-shadow: 0 -1px 0 darken($back-button-color, 15);

  &:hover {
    @include linear-gradient(darken($back-button-color, 15), darken($back-button-color, 8));
    box-shadow: 0 2px 3px rgba(#000, .7), 0 1px 0 lighten($back-button-color, 18), 0 -1px 0 darken($back-button-color, 10);
    text-shadow: 0 -1px 0 darken($back-button-color, 18);
  }

  &:before {
    content: " ";
    @include inline-block;
    width: 30px;
    height: 30px;
    background: image-url('back-arrow.png') no-repeat;
  }
}