h1 Light 3d button (Mixin SASS)

.contentButton
  h3 Orientation : right
  .b1 button
  .b2 button
  .b3 button
  .b4 button
  
.contentButton
  h3 Orientation : bottom
  .b5 button
  .b6 button
  .b7 button
  .b8 button

pre.
      @include buttonBlog(<span class="color">$orienation,$w,$h,$color</span>):
        <span class="color">$orientation</span> : <em> String </em> <strong>right</strong> or <strong>bottom</strong>
        <span class="color">$w, $h</span> : <strong>Pixel</strong> <em>value</em>
        <span class="color">$color</span> : <em> Color </em> <strong>Rgba</strong> or <strong>HEX</strong>

  

@import compass

@import url(https://fonts.googleapis.com/css?family=Open+Sans)
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300)

=buttonBlog($orientation,$w,$h,$color)
  text-align: center
  line-height: $h - 5
  position: relative
  top: 0
  left: 0
  +border-radius(4px)
  width: $w
  height: $h
  background: rgba($color,1)
  color: darken($color,25)
  font-family: Open sans Condensed
  font-size: 30px
  letter-spacing: 0.1em
  cursor: pointer
  @if $orientation == right
    box-shadow: 1px 1px 0px darken($color,10),2px 2px 0px darken($color,10),3px 3px 0px darken($color,10)
    transition: .2s all
    &:hover
      background-color: rgba($color, 0.9)
    &:active
      top: 3px
      left: 3px
      box-shadow: none
    
  @else if $orientation == bottom
    box-shadow: 0px 1px 0px darken($color,10),0px 2px 0px darken($color,10),0px 3px 0px darken($color,10)
    transition: .2s all
    &:hover
      background-color: rgba($color, 0.9)
    &:active
      top: 3px
      left: 0px
      box-shadow: none
    
    
    
    

body
  background-color: #FFA500
  
  
  pre
    background-color: #333
    width: 360px
    color: white
    padding: 5px
    +border-radius(4px)
    margin: auto
    margin-top: 30px
    
    .color
      color: #FFA500
      font-weight: bold
  
  .contentButton 
    width: 380px
    margin: auto
    margin-top: 20px
    overflow: hidden
    
    div
      float: left
      margin: 5px
      
  
  h1,h3
    text-align: center
    font-family: 'Open Sans', sans-serif
    color: white
    
  .b1
    +buttonBlog(right,180px,50px,#525252)
  
  .b2
    +buttonBlog(right,180px,50px,#5182C4)
      
  .b3
    +buttonBlog(right,180px,50px,#E75252)
   
  .b4
    +buttonBlog(right,180px,50px,#66CE5B)
    
  .b5
    +buttonBlog(bottom,180px,50px,#525252)
  
  .b6
    +buttonBlog(bottom,180px,50px,#5182C4)
      
  .b7
    +buttonBlog(bottom,180px,50px,#E75252)
   
  .b8
    +buttonBlog(bottom,180px,50px,#66CE5B)