Mixin for Embossed button using shadows

button.css.scss

@mixin shadow-button($background-color, $text-color) {
  background: $background-color;
  @include box-shadow(transparentize(darken($background-color, 40%), .8) 0 -20px 15px inset, transparentize(#fff, .9) 0 2px 1px inset, transparentize(#000, .8) 0 0 1px);
  @include border-radius(4px);
  @include inline-block;
  border: 1px solid darken($background-color, 20%);
  @include text-shadow(transparentize(darken($background-color, 30%), .3) 0 1px 1px );
  color: $text-color;
  @include transition-property("box-shadow, background, color");
  @include transition-duration(.1s);
  cursor: pointer;
  padding: 5px 14px 6px 14px;
  text-align: center;
  &:hover {
    text-decoration: none;
    background: lighten($background-color, 2%);
    @include transition-property("box-shadow, background, color");
    @include transition-duration(.07s);
    color: $text-color;
  }
  &:active {
    @include box-shadow(transparentize(darken($background-color, 50%), .5) 0 1px 4px inset, transparentize(#fff, .9) 0 2px 1px inset, transparentize(#fff, .8) 0 0 1px);
    @include transition-property("box-shadow, background, color");
    @include transition-duration(.07s);
    background: desaturate(darken($background-color, 8%), 20%);
    color: transparentize($text-color, .2s);
    padding: 6px 14px 5px 14px;
  }
}

Like