Keep your buttons sassy and defined once.

Sassy Buttons.textile

Rails

Template Usage

= fancy_button("Create Goal", new_goal_url, :class => 'create')

Helper

def fancy_button *args
  name = args.first
  opts = args.second || {}
  html_opts = args.third || {}
  if html_opts[:class]
    html_opts[:class] = "fancy " + html_opts[:class]
  else
    html_opts[:class] = "fancy"
  end
  if opts == {}
    opts = {:anchor => name.parameterize}
  end    
  name = "<span class=\"text\">#{name}</span>"
  link_to(name, opts, html_opts)  
end

Sass

Mixins

=fancy_button($base-color)
  $light-color: lighten($base-color, 6%)
  $border-color: darken($base-color, 6%)
  $highlight-color: transparentize(desaturate(lighten($base-color, 80%), 50%), 0.1)
  $shadow-color: desaturate(lighten($base-color, 30%), 20%)
  $text-shadow-color: darken($base-color, 15%)
  
  // populated dynamically by colors determined above
  background-color: $base-color
  border: 1px solid $border-color
  -moz-box-shadow: $shadow-color 0px 0px 2px 1px, inset 0px 0px 2px $highlight-color
  -webkit-box-shadow: $shadow-color 0px 0px 2px 1px, inset 0px 0px 2px $highlight-color
  -o-box-shadow: $shadow-color 0px 0px 2px 1px, inset 0px 0px 2px $highlight-color
  box-shadow: $shadow-color 0px 0px 2px 1px, inset 0px 0px 2px $highlight-color
  +single-text-shadow($text-shadow-color, 0, 1px, 1px)

  // base styles
  +border-radius(4px)
  padding: 2px 0 4px 0
  color: white
  font-family: $lucida_grande  
  font-weight: bold
  font-size: 13px
  line-height: 1em
  text-align: left
  letter-spacing: -.1px
  span
    padding: 0 .9em

  &:hover
    cursor: pointer
    text-decoration: none
    border-color: 1px solid red
    +linear-gradient($light-color, $base-color)
    text-shadow: #000, 0, 0, 0

//

Button Specific Styles

a.fancy.create
  +fancy_button($btn_green)
  +fancy_icon(plus, green)
  
a.fancy.update
  +fancy_button($btn_blue)
  +fancy_icon(arrow, blue, right)

a.fancy.review
  +fancy_button($btn_orange)
  +fancy_icon(arrow, orange, right)

a.fancy.plain
  +fancy_button($btn_white)
  color: #888
  +single-text-shadow(#fff, 0, 2px, 1px)  
  background: $btn_white
  border: 1px solid #cecece
  -moz-box-shadow: #ddd 0px 0px 2px 1px, inset 0px 0px 2px #fff
  -webkit-box-shadow: #ddd 0px 0px 2px 1px, inset 0px 0px 2px #fff
  -o-box-shadow: #ddd 0px 0px 2px 1px, inset 0px 0px 2px #fff
  box-shadow: #ddd 0px 0px 2px 1px, inset 0px 0px 3px #fff
//

Finished Product