Sass Buttons Mixin

_buttons.sass

@import css3

=button( $color: #f6f6f6 )
  display: inline-block
  position: relative
  cursor: pointer
  padding: 0.45em 0.8em 0.6em
  margin: 0
  font-weight: 500
  line-height: 1em
  color: #444
  text:
    shadow: 0 -2px 0 white
    align: center
  border: 1px solid
    color: darken($color, 3%) darken($color, 15%) darken($color, 25%)
  +background-vertical-gradient( $color, darken($color, 12.5%) )
  +box-shadow("0 1px 0 white inset, 1px 0 0 #{rgba(white,0.1)} inset, -1px 0 0 #{rgba(white,0.1)} inset, 0 -1px 0 #{rgba(white,0.1)} inset, 0 -0.25em 0.75em #{darken($color,10%)} inset, 0 1px 2px #{rgba(black, 0.2)}, 0 1px 0 white")
  +border-radius( 4px )
  
  @if $color != #f6f6f6
    color: white
    font-weight: 400
    text-shadow: 0 2px 0 darken($color, 30%)
    border-color: darken($color, 5%) darken($color, 10%) darken($color, 20%)
    +background-vertical-gradient( lighten($color, 10%), darken($color, 5%) )
    +box-shadow("0 1px 0 #{rgba(white,0.4)} inset, 1px 0 0 #{rgba(white,0.1)} inset, -1px 0 0 #{rgba(white,0.1)} inset, 0 -1px 0 #{rgba(white,0.1)} inset, 0 -0.25em 0.75em #{darken($color,12%)} inset, 0 1px 3px #{rgba(darken($color, 25%), 0.75)}, 0 1px 0 white")

  &:hover, &:focus
    outline: none
    text-decoration: none
    +background-vertical-gradient( lighten($color, 5%), darken($color, 10%) )
    +box-shadow("0 1px 0 white inset, 1px 0 0 #{rgba(white,0.1)} inset, -1px 0 0 #{rgba(white,0.1)} inset, 0 -1px 0 #{rgba(white,0.1)} inset, 0 -0.25em 0.75em #{darken($color,10%)} inset, 0 1px 3px #{rgba(black, 0.1)}, 0 2px 5px #{rgba(black, 0.1)}, 0 2px 5px #{rgba(darken($color, 30%), 0.75)}, 0 1px 0 white")
    
    @if $color != #f6f6f6
      text-shadow: 0 -1px 0 darken($color, 15%)
      border-color: $color darken($color, 10%) darken($color, 20%)
      +background-vertical-gradient( lighten($color, 25%), $color )
      +box-shadow("0 1px 0 #{rgba(white,0.4)} inset, 1px 0 0 #{rgba(white,0.1)} inset, -1px 0 0 #{rgba(white,0.1)} inset, 0 -1px 0 #{rgba(white,0.1)} inset, 0 -0.25em 0.75em #{lighten($color,5%)} inset, 0 1px 3px #{rgba(darken($color, 10%), 0.75)}, 0 2px 5px #{rgba(darken($color, 30%), 0.75)}, 0 1px 0 white")
  
  &:active
    text-decoration: none
    border-color: darken($color, 45%) darken($color, 35%) darken($color, 35%)
    +background-vertical-gradient(darken($color, 20%), darken($color, 15%))
    +box-shadow("0 1px 1px #{darken($color, 40%)} inset, 0 1px 5px #{darken($color, 50%)} inset, 0 0 1em 1px #{darken($color,30%)} inset, 0 1px 0 white")
    
    @if $color != #f6f6f6
      color: rgba(white, 0.75)
      text-shadow: 0 -1px 0 darken($color, 30%)
      border-color: darken($color, 45%) darken($color, 35%) darken($color, 35%)
      +background-vertical-gradient(darken($color, 10%), darken($color, 5%))
      +box-shadow("0 1px 1px #{darken($color, 20%)} inset, 0 1px 5px #{darken($color, 30%)} inset, 0 0 1em 1px #{darken($color,20%)} inset, 0 1px 0 white")
  
  &.disabled, &[disabled]
    background: desaturate(lighten($color,55%), 50%)
    border-color: desaturate(lighten($color,40%), 40%)
    color: $color
    text-shadow: none
    +box-shadow(none)

_css3.sass

// CSS Transitions
=transition( $transition )
  $transition: unquote( $transition )
  -webkit-transition: $transition
  -moz-transition: $transition
  -ms-transition: $transition
  -o-transition: $transition
  transition: $transition

=transition-property( $property )
  $property: unquote( $property )
  -webkit-transition-property: $property
  -moz-transition-property: $property
  -ms-transition-property: $property
  -o-transition-property: $property
  transition-property: $property

=transition-duration( $duration )
  $duration: unquote( $duration )
  -webkit-transition-duration: $duration
  -moz-transition-duration: $duration
  -ms-transition-duration: $duration
  -o-transition-duration: $duration
  transition-duration: $duration

=transition-easing( $easing )
  $easing: unquote( $easing )
  -webkit-transition-timing-function: $easing
  -moz-transition-timing-function: $easing
  -ms-transition-timing-function: $easing
  -o-transition-timing-function: $easing
  transition-timing-function: $easing

// Decoration
=box-shadow( $shadow )
  $shadow: unquote( $shadow )
  -webkit-box-shadow: $shadow
  -moz-box-shadow: $shadow
  -ms-box-shadow: $shadow
  -o-box-shadow: $shadow
  box-shadow: $shadow

=border-radius( $radius )
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  -ms-border-radius: $radius
  -o-border-radius: $radius
  border-radius: $radius

=background-vertical-gradient( $startcolor, $endcolor )
  background:
    color: $startcolor
    image: -webkit-linear-gradient(top, $startcolor, $endcolor)
    image: -moz-linear-gradient(top, $startcolor, $endcolor)
    image: -ms-linear-gradient(top, $startcolor, $endcolor) // IE 10+
    image: -o-linear-gradient(top, $startcolor, $endcolor)
    image: linear-gradient(top, $startcolor, $endcolor)
    position: top left
    repeat: no-repeat

=background-horizontal-gradient( $startcolor, $endcolor )
  background:
    color: $startcolor
    image: -webkit-linear-gradient(left, $startcolor, $endcolor)
    image: -moz-linear-gradient(left, $startcolor, $endcolor)
    image: -ms-linear-gradient(left, $startcolor, $endcolor) // IE 10+
    image: -o-linear-gradient(left, $startcolor, $endcolor)
    image: linear-gradient(left, $startcolor, $endcolor)
    position: top left
    repeat: no-repeat

=background-size($size)
  -webkit-background-size: $size
  -moz-background-size: $size
  -ms-background-size: $size
  -o-background-size: $size
  background-size: $size
  
=rotate( $deg )
  -webkit-transform: rotate($deg)
  -moz-transform: rotate($deg)
  -ms-transform: rotate($deg)
  -o-transform: rotate($deg)
  transform: rotate($deg)

=appearance( $appearance )
  -webkit-appearance: $appearance
  -moz-appearance: $appearance
  -ms-appearance: $appearance
  -o-appearance: $appearance
  appearance: $appearance

usage.sass

// Usage example
a.button, input[type=submit], button
  font-size: 16px // Button is automatically resized proportionally to font size.
  +button( #06c ) // Button base color as parameter. No parameter = grey button.