_vars.sass

$button-top-left-border: #cccccc
$button-bottom-right-border: #bbbbbb
$button-top-background: #f9f9f9
$button-bottom-background: #e3e3e3
$button-text-color: #000000
$button-active-top-left-border: #555555
$button-active-bottom-right-border: #444444
$button-active-top-background: #666666
$button-active-bottom-background: #7c7c7c
$button-active-text-color: #ffffff
$button-selector: ".button"
$button-set-selector: ".buttonset"

//               OPTIONS
// =====================================
// "unround" : suppress rounded corners
//             for IE on active buttons
//             in buttonsets
//             
// "uncolor" : keep the border color
//             the same for active
//             buttons in buttons sets
//             in IE
$button-set-ie-compenstation: "unround"

buttons.sass

body
  min-height: 100%
  padding: 10px

@import vars

#{$button-selector}
  border:
    top: 1px solid $button-top-left-border
    bottom: 1px solid $button-bottom-right-border
    left: 0
    right: 0
  background: $button-top-background
  display: inline-block
  /* This is necissary for button tags which for some reason don't use the standard box model...
  -webkit-box-sizing: content-box
  -moz-box-sizing: content-box
  box-sizing: content-box
  /* If the element is an anchor tag, which is very likely
  text-decoration: none
  overflow: visible
  min-width: 100px
  height: 25px !important
  line-height: 26px
  font-size: 12px
  text-align: center
  padding: 0 5px
  font-family: Helvetica, Arial, sans-serif
  position: relative
  z-index: 1
  margin: 5px
  color: $button-text-color
  &:before
    content: ""
    display: block
    position: absolute
    top: 50%
    bottom: 0
    left: 0
    right: 0
    margin-top: -1px
    background: $button-bottom-background
    border-top: 3px solid mix($button-top-background, $button-bottom-background)
    z-index: -1
  &:after
    content: ""
    display: block
    position: absolute
    top: 0
    bottom: 0
    left: -1px
    right: -1px
    border:
      top: 0
      bottom: 0
      left: 1px solid $button-top-left-border
      right: 1px solid $button-bottom-right-border
  &.important
    font-weight: bold
      
#{$button-selector}:active
  background: $button-active-top-background
  color: $button-active-text-color
  outline: 0
  border:
    top: 1px solid $button-active-top-left-border
    bottom: 1px solid $button-active-bottom-right-border
  &:before
    border-top-color: mix($button-active-top-background, $button-active-bottom-background)
    background: $button-active-bottom-background
  &:after
    border:
      left: 1px solid $button-active-top-left-border
      right: 1px solid $button-active-bottom-right-border

#{$button-set-selector}
  margin: 5px
  margin-right: 9px
  display: inline-block
  #{$button-selector}
    margin: 0
    margin-right: -4px
  #{$button-selector}:active
    z-index: 2
    &:after
      right: 0
      left: 0
    &:first-child:after
      left: -1px
    &:last-child:after
      right: -1px

ie8.sass

@import vars

#{$button-selector}:focus
  outline: 0
  
#{$button-set-selector}
  *zoom: 1
  *display: inline
  @if $button-set-ie-compenstation == "uncolor"
    #{$button-selector}:active
      z-index: 1
      border:
        top: 1px solid $button-top-left-border
        bottom: 1px solid $button-bottom-right-border
      &:after
        border:
          left: 1px solid $button-top-left-border
          right: 1px solid $button-bottom-right-border
  @if $button-set-ie-compenstation == "unround"
    #{$button-selector}:active:after
      left: 0
      right: 0