@mixin three-dee ($color: $button-color, $text-shadow: $button-text-shadow, $box-shadow: $button-box-shadow){
  $base-color: $color;
  $grad-1: darken($base-color, 30%);
  $dark-color: darken($base-color, 20%);
  $highlight-color: lighten($base-color, 50%);

  background-color: $base-color; // Old browsers
  @include filter-gradient($base-color, $base-color, vertical); // IE6-9
  @include background-image(linear-gradient(top,  $base-color 0%,$grad-1 50%,$base-color 100%));

  border: 1px solid $dark-color;

  @include button-default;

  @if $text-shadow == true {
    text-shadow: 0px 1px 3px transparentize($dark-color, 0.5);
  }
  @if $box-shadow == true {
    box-shadow: 0 em(2) em(6) em(0) $shadow-color, $highlight-color 0 1px 0 inset;
  }

  &:hover {
    $base-color: darken($base-color, 10%);
    $grad-1: darken($grad-1, 10%);
    background-color: $base-color; // Old browsers
    @include filter-gradient($base-color, $base-color, vertical); // IE6-9
    @include background-image(linear-gradient(top,  $base-color 0%,$grad-1 50%,$base-color 100%));
  }

  @media #{$mobile} {
    width: 100%;
  }
}