Slightly ajar

When wanting to add anything more than very basic styling to a button on a webpage, images are often used as the styling offered by CSS has been limited, especially when one wants to keep the HTML semantically clean. There are also notorious browser differences when styling any kind of form elements across browser and platforms. There are a number of drawbacks to using images however, including:

• Increased page weight
• Reliance on image editing applications and familiarity
• Makes it more difficult to localise/internationlise the site
• Breaks automated translations
• Increases the time needed to redesign the buttons, especially when a simple change is needed
• Images do not scale when text size is increased, or become difficult to read with page zoom
• Page becomes less semantic if img tags are used

While it will take a long time before CSS3 can be relied on being supported in all major browsers, it will eventually solve many of these issues above. You can see a few examples that I've created just using a button element, and no images, here. I will add to these examples as time permits. As you may be able to see there are a number of issues in various browsers, as CSS3 support is still spotty in all browsers. As I served the document as application/xhtml+xml it does not display in IE at all. This doesn't affect much as it doesn't have CSS3 support yet.

Rounded corners

• Rounded corners are not displayed in Opera yet, or the latest released version of Safari due to lack of border radius
• Rounded corners are jagged in Firefox but are much smoother in the latest nightlies
• The latest nightlies of Firefox doesn't seem to support different horizontal and vertical radius values (used to make the rounded edges to look flatter in the second set of buttons)
• Corners work as expected in the latest WebKit nighlies

Text shadow

• Text shadow is not shown in the latest release of Opera or in any version of Firefox
• Text shadow works in Safari and the internal builds of Opera, but isn't quite as smooth yet

Drop shadow

• Only the latest nightlies of Safari support box-shadow so far

Text

• Fonts are still restricted to the typical web fonts
• The latest nightly of Firefox doesn't render the last button as italic, while the text is very jagged in the latest release

Browsers that don't support all the properties above fall back in an accessible way, but will not look like how your client will accept generally. For buttons with effects such as gradients and advanced borders or shapes, then images will be required but can be added using CSS. CSS3 supports border-image, so any sort of border you require can be added as long as you have an image editor handy. CSS3 also supports multiple background images, so one could add a gradient to the background, as well as other images or symbols that are required. This allows many different styles to be possible, while keeping the markup as a button, and the text as regular text. The only major drawback with any design is that you are still restricted to the common web fonts that users have on their system.

One important note is that these buttons are only meant as a playground of what CSS3 will be able to do and are not meant to be used in a production environment. Even the browsers that display these buttons need vendor specific prepends to some properties, such as -moz- and -webkit-. As specs may change before being finalised, it is best to wait at least until they can be used without the prepend in two or more browsers.

[EDIT] For those of you who don't have a browser available to see what these buttons should look like when the relevant CSs is supported, here is an image: