Button Basics

No body is mentioning but the tutorial is really descriptive in content where much of the design tutorials on the web lacks. It explains each design step, not 'how to do it' but 'why to do it', which i think developer minds looking for in design.<p>I will have an eye on this, keep up the good work.

The problem with image buttons like the ones shown are that they visually break when zoomed in (tested in Chrome). When I zoom in, the right side of the buttons does no longer fit perfectly with the rest of the button: it get moved by some 2 pixels up, while the rest of the button remains in place.<p>I've experienced this problem on many websites, that's why I try to avoid composite image buttons whenever possible. Either I create a button of only one image(which often can't be reused) or I create if with CSS3 (some compatibility issues).

So to get this straight, the author created a button image in photoshop, then created the same style using css3, took a picture of both, zoomed in, and compared the pixelated blockyness? ... While completely disregarding the fact that actually zooming in on the css3 version in the browser would avoid any pixelation and blockyness in the first place?

Fyi, using Dropbox as a replacement for real image hosting (either on your own server or through a service such as S3) means that anyone at work who can't get to a Dropbox URL can't see basically anything worthwhile on your site.

Great tutorial if you want to create buttons form scratch in photoshop with and use css sprites.<p>What I would like to see, is a simple javascript api on top to generate all the nitty gritty css in the browser. That's excatly what sproutcore and sencha touch does.

One downside with image buttons: they are really, really, annoying to localize. A compromise would be to have the button itself as an image and overlay the label in HTML.