Button Hue

Button Saturation

Button Lightness

Button Puffiness

We built this generator to help us build Monotask. If you’re easily distracted by shiny things online, you should check Monotask out.

How to Use This CSS Generator

This is an extension to the Twitter Bootstrap framework. It makes creating pretty buttons easy. (Send improvements to @charliepark.)

First, monkey with the sliders on the left.

Use your arrow keys for extra precision. (Button Puffiness might not affect all browsers.)

Second, copy the CSS in the box below.

You should be able to just pop it into your CSS file. Apply the class “btn-custom” to any button (or other element) on your site that you want to have these colors.

Some Examples! (you can probably do better than these, though)