Mixin to create: Button with shadow and hover effect

button_shadow_mixin.sass

@import "compass"


=btn_color_big_shadow($color, $fontSize)
  border: 0
  cursor: pointer
  display: inline-block
  font-weight: normal
  font-size: $fontSize
  line-height: normal
  padding: .5em 1em
  position: relative
  text-align: center
  +appearance(none)
  +border-radius(4px)
  background: $color
  box-shadow: 0 4px darken($color, 10%)
  color: button-text($color)
  &:hover
    top: 2px
    background: darken($color, 5%)
    box-shadow: 0 2px darken($color, 10%)
  &:active
    top: 4px
    box-shadow: none

=btn_color_small_shadow($color, $fontSize)
  border: 0
  cursor: pointer
  display: inline-block
  font-weight: normal
  font-size: $fontSize
  line-height: normal
  padding: .5em 1em
  position: relative
  text-align: center
  +appearance(none)
  +border-radius(2px)
  background: $color
  box-shadow: 0 4px darken($color, 10%)
  color: button-text($color)
  +transition(all .2s ease)
  &:hover
    top: 2px
    background: darken($color, 5%)
    box-shadow: 0 2px darken($color, 10%)