pretty buttons.sass

=rounded(!width=3px)
  :-webkit-border-radius = !width
  :-moz-border-radius = !width

=shadow(!alpha=0.2, !x=0px, !y=1px, !radius=5px)
  :-webkit-box-shadow rgba(0, 0, 0, #{!alpha}) #{!x} #{!y} #{!radius}
  :-moz-box-shadow rgba(0, 0, 0, #{!alpha}) #{!x} #{!y} #{!radius}

=background_gradient(!from, !to)
  :background-color = !from
  :background -moz-linear-gradient(#{!from}, #{!to})
  :background -webkit-gradient(linear, left top, left bottom, from(#{!from}), to(#{!to}))

=button
  +rounded
  +background_gradient(#eee, #ccc)
  +shadow(0.15)
  :border solid 1px #ccc
  :border-right-color #999
  :border-bottom-color #999
  :text-shadow rgba(255, 255, 255, 0.4) 0px 1px 0px
  &:active
    +background_gradient(#ccc, #eee)
  &[disabled]
    +background_gradient(#eee, #ccc)
    :color #aaa

=grouped
  +rounded(0px)
  :border solid 1px #{!dark_grey}
  :border-left-width 0px
  :cursor pointer
  &:first-of-type
    :border-left-width 1px
    :-webkit-border-top-left-radius 3px
    :-webkit-border-bottom-left-radius 3px
    :-moz-border-radius-topleft 3px
    :-moz-border-radius-bottomleft 3px
  &:last-of-type
    :-webkit-border-top-right-radius 3px
    :-webkit-border-bottom-right-radius 3px
    :-moz-border-radius-topright 3px
    :-moz-border-radius-bottomright 3px
  &.current
    +background_gradient(#ccc, #aaa)

button, input[type=submit]
  :font-size = !small
  :padding 4px 8px
  +button