Most robust CSS-only button solution?

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?

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

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>

There is no way to do what you're 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, you can then be assured that most if not all browsers will support it (if you're using a .png image, 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 two different ways:

• The first is via images and you would place these at the corners of the element giving the rounded appearance. What I've said before about .png images 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 two methods the first one is preferred if you want to make absolutely sure that the users can see curves, however if you aren't too concerned about them having JavaScript disabled I would definitely use jQuery as it's 100 times easier to use.