Gradient Buttons The Right Way

gistfile1.sass

// This way you can change the buttons color with a simple `background-color` setting
// without need to regenerate the whole gradient


input[type=button], input[type=submit], button
  font-family: Arial, Helvetica
  color: #333
  border: 1px solid #ccc
  border-radius: .25em
  text-shadow: 0 1px 1px rgba(0,0,0,.3)
  padding: 0.2em 1em
  background-color: #ccb
  background-image: -webkit-linear-gradient(rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%)
  background-image: -moz-linear-gradient(   rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%)
  background-image: -ms-linear-gradient(    rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%)
  background-image: -o-linear-gradient(     rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%)
  background-image: linear-gradient(        rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%)
  position: relative

  &:hover
    box-shadow: 0 1px 2px rgba(0,0,0,.2)
    background-image: -webkit-linear-gradient(rgba(255,255,255,0.9) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.07) 85%)
    background-image: -moz-linear-gradient(   rgba(255,255,255,0.9) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.07) 85%)
    background-image: -ms-linear-gradient(    rgba(255,255,255,0.9) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.07) 85%)
    background-image: -o-linear-gradient(     rgba(255,255,255,0.9) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.07) 85%)
    background-image: linear-gradient(        rgba(255,255,255,0.9) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.07) 85%)

  &:active
    top: 1px
    box-shadow: 0 1px 1px rgba(0,0,0,.2) inset
    background-image: -webkit-linear-gradient(rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%)
    background-image: -moz-linear-gradient(   rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%)
    background-image: -ms-linear-gradient(    rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%)
    background-image: -o-linear-gradient(     rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%)
    background-image: linear-gradient(        rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%)

  &:focus
    outline: 0
    background-color: #ccc
    border-color: #aaa
    box-shadow: 0 1px 2px rgba(0,0,0,.2)