Example button mixins from a recent project

button_mixins.sass

// example button mixins pasted in from a recent project.
// a hopefully useful example of how to inherit mixins from a base styleset
// and minimize verboseness of fancy gradients

= bg_sheen($bg)
  background-color: $bg
  background-image: -webkit-linear-gradient(top, rgba($bg, .5) 0%, rgba($bg + #111, .5) 49%, rgba($bg - #050505, .5) 50%, rgba($bg, .5) 100%)
  background-image: -moz-linear-gradient(top, $bg 0%, $bg + #111 49%, $bg - #050505 50%, $bg 100%)

= button_base
  display: inline-block
  font-weight: normal
  text-decoration: none
  cursor: pointer
  overflow: visible
  line-height: 100%
  text-align: center
  +intro
  &[disabled], &.disabled
    +opacity(.6)
    cursor: default

= button_skeleton($bg, $border, $color)
  +button_base
  color: $color
  text-shadow: 0 0 1px $bg
  +bg_sheen($bg)
  border: 1px solid $border
  +border-radius(3px)
  +box-shadow(0 1px 1px #777)
  +transition-property(background-color)
  +transition-duration(200ms)
  &:hover
    background-color: $bg + #222
  &.disabled:hover
    +bg_sheen($bg)

= nav_button
  +button_skeleton(#e7e7e7, #c9c9c9, #4f4f4f)
  text-transform: uppercase
  font-size: 14px
  padding: 12px 30px 6px 30px

= answer_button($y_padding: 8)
  +button_skeleton(#e7e7e7, #c9c9c9, #4f4f4f)
  font-size: 14px
  padding: #{$y_padding + 4}px 20px #{$y_padding}px 20px
  text-align: center
  min-width: 60px
  &.selected,
  &.selected:hover
    +gradient-bg(#cdcdcd, #dedede)
    border-bottom: 1px solid #ddd
    +box-shadow((0 1px 1px #c9c9c9, inset 0 0 8px rgba(0,0,0,.2), inset 0 1px 0px #999))
    text-shadow: 0 1px 0 #fff

= multiple_answer_button
  +button_base
  +intro
  border: 1px solid #c9c9c9
  background: #fff
  color: #737373
  background: url("/assets/icon_check_off.png") #fff 3px 3px no-repeat
  padding: 7px 10px 4px 26px
  font-size: 14px
  +border-radius(3px)
  &.checked
    color: #333
    background-image: url("/assets/icon_check_on.png")

= bright_button
  +button_skeleton(#00e9ff, #00bbce, #000)
  font-size: 15px
  padding: 14px 30px 8px 30px
  font-size: 14px
  text-transform: uppercase
  text-shadow: 0 1px 0 #b6eff6

= remove_button
  +button_skeleton(#e7e7e7, #c9c9c9, #4f4f4f)
  height: 13px
  width: 13px
  padding: 2px
  text-indent: -9327px
  span
    background: url("/assets/icon_close.png")
    width: 13px
    height: 13px
    display: block