Yesterday I found the super yummy pure-CSS buttons designed by Web Designer Wall.

Wondering how one could use this design wisdom despite not posessing the art of subtle gradients and matching colors, I created code that does this by magic. And by magic I mean Sass, its color functions, and some formulas to derive the colors for gradients, border and text starting from the base color.

So now I can get these

… with this little code:

@import "_buttons"

.button
  +button
  +color(#d22)

Go to the project’s page for the full description and the mixin.

Or, if you don’t fancy Sass (although you should), I created a page to generate the CSS for yummy buttons in the color of your choosing.

April 2013: SCSS with compass implementation by Adam Johnson

30 Oct 2010