A button mixin that takes a variable for color and an optional icon

README.md

Button Mixin

Usage:

@include button( $color [, $icon] )

Example:

@include button( #26a9e0 )

will produce:

Example:

@include button( #26a9e0, menu )

will produce:

You'll need to make sure your icon is named in the proper format as shown on line 4. In this case, the file would be named "icon-menu.svg" and in the "img" directory (from the parent directory).

button-mixin.sass

@mixin button( $baseColor, $iconFile: null )

  @if $iconFile
    $iconFile: url(../img/icon-#{$iconFile}.svg)
    background-position: 16px 50%, 0 0
    padding-left: 36px
  @else
    padding-left: 15px

  +background-image( $iconFile, linear-gradient( $baseColor, darken( $baseColor, 7% ) ) )
  background-repeat: no-repeat
  border: 1px solid darken( $baseColor, 12% )
  +box-shadow( 0 1px 0 rgba(255, 255, 255, .2) )
  +border-radius( 3px )
  font-family: $sansSerif
  padding-top: 7px
  padding-bottom: 7px
  padding-right: 15px
  text-shadow: none

  &:active
    +background-image( $iconFile, linear-gradient( darken( $baseColor, 7% ), $baseColor ) )
    +box-shadow( 0 1px 0 rgba(255, 255, 255, .2), 0 1px 0 rgba(0, 0, 0, .15) inset )