Most robust CSS-only button solution?

Question

What's the best, most robust CSS-button definition?

Ideally, I'd like gradients, rounded images, and graceful degradation down to IE8. It would also be great if the buttons didn't use any images, and the buttons scaled horizontally to fit their content.

What's the best solution to this?

Answer 1

Use the tools at http://css-tricks.com/examples/ButtonMaker

Answer 2

It is possible to use gradients, box-shadow, border-radius, rgba colour et cetera in older versions of Internet Explorer, using CSS3 PIE. Look at their demo with all these CSS3 properties.

Now, combine CSS3 PIE with the button maker mentioned in the comments and you're done!

Answer 3

Huge fan of JQuery UI buttons. Demo is here

Yes, they do use some images...but the images are also common to the many other features of JQuery UI, which offers your page some amazing features (and more coming all the time) It does gracefully degrade, and you can extend it to round in IE via another JQuery plugin. My favorite part is ThemeRoller, which allows you to build a page using themeroller capable plugins, then style or change at will, even with a tool that floats over the site. You could easily include a way for your user to switch the entire theme of the site with a button click. Plus, there's an editor to easily make your own themes if you don't like what's there.

As for gradients, you have fade up, fade down, curved fade, patterns, and then "build your own" options with variations of those and more plus color overlays and opacities.

Setting up a button is as easy as: <button class="ui-state-default ui-corner-all" type="submit">Button</button>