SCSS mixin for generating 3D button

buttons.scss

/**
 * variables:- 
 * @bgcolor: background color.
 * @color: font color in button.
 * @shdow-depth: depth for box-shadow around button.
 */
 
@mixin button($bgcolor, $color, $shadow-depth) {
  
  // Box shadow array.
  $shadow: ();
  
  // Reset default things.
  border: 0;
  outline: 0;
  appearence: none;
  cursor: pointer;
  
  // fallback background color.
  background-color: $bgcolor;
  
  background: $bgcolor;
  color: $color;
  
  // Box-shadow stuff.
  @for $i from 1 through $shadow-depth {
    @for $j from 0 through 1 {
      $shadow: $shadow, $i+0px $i+$j+(-1px) 0 darken($bgcolor, 10%);
    }
  }
  box-shadow: $shadow;
 
  // position. will use for active state.
  position: relative;
 
  // Hover state.
  &:hover {
    background: darken($bgcolor, 5%);
  }
  
  // Active state.
  &:active {
    top: $shadow-depth+0px;
    left: $shadow-depth+0px;
    background: darken($bgcolor, 10%);
    box-shadow: none;
  }
 
}