CSS3 buttons in Stylus

css3-buttons.styl

// based on http://css3-buttons.heroku.com/

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments

box-shadow()
  -webkit-box-shadow arguments
  -moz-box-shadow arguments
  box-shadow arguments

gradient(top, bottom)
  background-color bottom
  background -webkit-gradient(linear, left top, left bottom, from(top), to(bottom))
  background -moz-linear-gradient(top, top, bottom)
  @css { filter progid:DXImageTransform.Microsoft.gradient(startColorstr={top}, endColorstr={bottom}) }
    
button()
  display inline-block
  outline none
  cursor pointer
  text-align center
  text-decoration none
  font 14px/100% Arial, Helvetica, sans-serif
  padding .5em 2em .55em
  text-shadow 0 1px 1px rgba(0,0,0,.3)
  border-radius .5em
  box-shadow 0 1px 2px rgba(0,0,0,.2)
  &:hover
    text-decoration none
  &:active
    position relative
    top 1px

color(arguments)
  border solid 1px darken(arguments, 3%)
  gradient lighten(arguments, 13%), arguments
  &:hover
    gradient(lighten(arguments, 10%), darken(arguments, 5%))
  &:active
    gradient(arguments, lighten(arguments, 10%))

// Mozilla: don't show border around the button's text on click
button,
input[type="reset"],
input[type="button"],
input[type="submit"],
input[type="file"] > input[type="button"]
  &::-moz-focus-inner
    border: none

.button
  button()

.orange
  color(#f47a20)