CSS buttons mean that web apps can create UI elements without (a) relying on ugly, unreliable browser builtin sprites, and (b) having to handcraft graphics for every label the application needs. It's not a small win; it reduces many feature requests from 30 minutes down to 2.
CSS Buttons are all well and good for simple styles and rapid prototyping. But what happens when your boss asks you to add an icon inside the button? Or stretch it vertically? Or add it to an email bulletin?
And the time you claim to have gained by not having to fire up photoshop and knock out a few simple buttons, you'll lose again by having to test in different browsers. Also consider readability, maintainability, future-proofing your code, semantic html.
edit: and if the ability to autogenerate arbitrary buttons is important, knock up a server side script to create the graphics for you. Really. That's much nicer than doing it in CSS for all but the simplest of cases.
adding an icon inside a button is far simpler with css buttons, stretching it vertically is obviously miles miles easier with css than with images, email is just a whole other nightmare that I really dont think should even be considered when talking about sane html / css.
I dont understand how you can possibly think generating text inside images to be more readable or semantic, future proof or maintainable.
nor do I understand how you think things creating generating images programatically on the server is easier or nicer than coding up a a .btn class
the cross browser issues might have some possible point, but in reality most people are just going to be copying and pasting from someone else who has worried about these things (I regularly copy and paste the css from gmail buttons)
Good points, esp re email. I'm not particularly wedded to either side of the debate really, but:
> generating text inside images
oh, nonono, I was thinking more in terms of INPUT.button{background-image: url(btn.php?button_attributes_in_json);}
> adding an icon inside a button is far simpler with css buttons
depends what wonderful CSS you're using to create your button.
> generating images programatically on the server is easier
you say 'programmatically' like I'm suggesting something beyond taking a few pre-made slices and combining them into one image before serving it up. I'm not.
>you say 'programmatically' like I'm suggesting something beyond taking a few pre-made slices and combining them into one image before serving it up. I'm not.
heh its not "hard", but its already a hell of a less convenient than what I just do now with css.
We generate them with GraphicsMagick, but I've worked on my fair share of projects with complicated web UIs, and it was definitely not the standard practice I observed to automate this stuff (I got made fun of on this project for taking a couple hours to do it). They made buttons in Photoshop.
there is always this point at which you start automating things, you have 1 or 2 "discount stickers" or whatever. then you start using them a lot, and at some point it becomes worth it to build a tool to automate it rather than do it by hand.
with css you do it once and its pretty much already automated, you just add a class to each "discount" or "tag" button you want.
On a side note I really despise the "you are doing it wrong" meme, it virtually always means "you arent doing it with the same concerns I have".
