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?
There is no way to do what ur asking with css only, as gradients and corners were only added as of css3 and even now they are still not fully supported.
The best way to achieve gradients now is to use an actual image, u can then be assured that most if not all browsers will support it (If u are using a .png IE6 may have an issue with it but there are css hacks to get around it).
Rounded corners can be added to the site in 2 different ways:
-The first is via images and u would place these at the corners of the element giving the rounded appearance, what ive said b4 about png's still applies here. -The second method is to use Javascript, most frameworks will have plugins designed with web 2.0 features in mind, I recommend JQuery as it's easy to implement.
Out of the above to methods the first one is preffered if u want to make absolutely sure that the users can see curves, however if you aren't 2 concerned about them having javascript disabled i would definately use JQuery as it's 100 times easier to use.
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!
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>