gistfile1.sass

$button_color: orange !default

=button($color: $button_color, $size: large)
  display: inline-block
  outline: none
  cursor: pointer
  text-align: center
  text-decoration: none
  line-height: 137%
  font-weight: bold
  font-family: Arial, Helvetica, sans-serif
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3)
  +corners(0.5em)
  +box-shadow(0 1px 2px rgba(0, 0, 0, .2))
  &:hover
    text-decoration: none
  &:active
    position: relative
    top: 1px

  +button-size($size)
  &.large
    +button-size(large)
  &.medium
    +button-size(medium)
  &.small
    +button-size(small)

  +button-color($color)
  &.orange
    +button-color(orange)
  &.green
    +button-color(green)
  &.red
    +button-color(red)
  &.blue
    +button-color(blue)
  &.pink
    +button-color(pink)

=button-size($size)
  @if $size == large
    font-size: 13px
    padding: 4px 1em 5px
  @if $size == medium
    font-size: 12px
    padding: 3px 1em 4px
  @if $size == small
    font-size: 11px
    padding: 2px 1em 3px

=button-color($color)
  @if $color == orange
    color: #fef4e9 !important
    border: solid 2px #943100
    background: #cc3300
    +background-gradient(#ff9933, #cc3300)
    &:hover
      background: #ff9933
      +background-gradient(#cc3300, #ff9933)
    &:active
      color: #fcd3a5
      +background-gradient(#cc3300, #ff9933)
  @if $color == green
    color: #e8f0de !important
    border: solid 2px #15520e
    background: #185c10
    +background-gradient(#289a1a, #185c10)
    &:hover
      background: #289a1a
      +background-gradient(#185c10, #289a1a)
    &:active
      color: #a9c08c
      +background-gradient(#185c10, #289a1a)
  @if $color == red
    color: #faddde !important
    border: solid 2px #940000
    background: #a50909
    +background-gradient(#fa3030, #a50909)
    &:hover
      background: #fa3030
      +background-gradient(#a50909, #fa3030)
    &:active
      color: #de898c
      +background-gradient(#a50909, #fa3030)
  @if $color == blue
    color: #d9eef7 !important
    border: solid 2px #0076a3
    background: #0095cd
    +background-gradient(#00adee, #0078a5)
    &:hover
      background: #007ead
      +background-gradient(#0095cc, #00678e)
    &:active
      color: #80bed6
      +background-gradient(#0078a5, #00adee)
  @if $color == pink
    color: #feeef5 !important
    border: solid 2px #94006a
    background: #a50979
    +background-gradient(#fa30c0, #a50979)
    &:hover
      background: #fa30c0
      +background-gradient(#a50979, #fa30c0)
    &:active
      color: #f5c1e6
      +background-gradient(#a50979, #fa30c0)