Angled linear gradients in sass/fancy-buttons

I'm so happy with how simple it is to make a nice looking button for a web-page with the combination of fancy-buttons and sass/compass that I just had to share:

Recently a design concept came back that included buttons (done in photoshop of course) in this style:



I had used fancy-buttons in the prototype of this project (www.coolchars.com). I was very happy that my html boiled down to simple 'button' tags and some fairly straight forward sass (which generates all the goobly-gook css). I was so happy with sass+fancy-buttons that I wanted to resist the urge to fall back to image based buttons for this angled gradient... so I did a little digging. It turns out you can do an angled gradient.

The following sass:

!lightgrey = #d8d8d8
!darkgrey = #adadad

button
  +linear-gradient("left top", "right bottom", !lightgrey, !darkgrey, color_stop(65%, !lightgrey))
  //...other styling irrelevant to the gradient example goes here...

can help produce a button that looks like:

The two keys to this are the directional cues ("left top", "right bottom") and the color_stop function. While we only used one gradient here, color_stop will let you do multiple color gradients stopping at different percentage points across a button if needed.

The only downside is that css generated for the angled linear gradient is pretty much webkit only right now. Firefox 3.6 has new angled gradient support and the author of fancy-buttons is currently working on adding FF support. Other browsers fallback to background color/image styling based on what you set up for your buttons in your sass files.