First of all, both approaches work and are just fine. The image approach is robust and creates a great, consistent result. The small downsides are the image's download size and the inflexibility.
Still, I'd like to make an attempt on selling CSS3 to you. Here's a few reasons:
- You don't need hacks. At the most you need a few vendor-extensions in your CSS. They're not pretty, but they're not hacks. In fact, vendor extensions are the standardized way to do this as long as the implementation is not final yet.
- CSS3 can accomplish the look you are after. I see rounded corners, shadows and an inner gradient. CSS3 can do all of this. The big bonus is that you can change the color, size, rounding, etc without needing to create a new image.
- If you use vendor extensions you'll be surprised how many browsers you cover. And guess what, it is not going to suck for unsupported browsers. They'll still get a button, a colored one, with a label.
The last idea is actually the most important concept. The idea that a design needs to look 100% the same across browsers is dated. Better browsers get a better experience, lesser browsers still get a good experience. Unless, of course, you have a client that insists on pixel perfect IE6 support. In that case you make it visible how much such a request costs. I bet they will think a square button is fine.
To show you how incredibly subtle these differences can be:
Jake,
First of all, both approaches work and are just fine. The image approach is robust and creates a great, consistent result. The small downsides are the image's download size and the inflexibility.
Still, I'd like to make an attempt on selling CSS3 to you. Here's a few reasons:
- You don't need hacks. At the most you need a few vendor-extensions in your CSS. They're not pretty, but they're not hacks. In fact, vendor extensions are the standardized way to do this as long as the implementation is not final yet.
- CSS3 can accomplish the look you are after. I see rounded corners, shadows and an inner gradient. CSS3 can do all of this. The big bonus is that you can change the color, size, rounding, etc without needing to create a new image.
- If you use vendor extensions you'll be surprised how many browsers you cover. And guess what, it is not going to suck for unsupported browsers. They'll still get a button, a colored one, with a label.
The last idea is actually the most important concept. The idea that a design needs to look 100% the same across browsers is dated. Better browsers get a better experience, lesser browsers still get a good experience. Unless, of course, you have a client that insists on pixel perfect IE6 support. In that case you make it visible how much such a request costs. I bet they will think a square button is fine.
To show you how incredibly subtle these differences can be:
http://www.ferdychristant.com/blog/archive/DOMM-83SSEX