8 ms·

Button Basics

95 points by heycarsten 15y ago

thomasfl 15y ago
Great tutorial if you want to create buttons form scratch in photoshop with and use css sprites. 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.
nxn 15y ago
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?
- ryanf 15y ago
  He's zooming in so you can see the pixels. He obviously isn't talking about putting giant, stretched-out buttons on an actual site.
  - nxn 15y ago
    Which is not what I'm talking about either. I'm just saying it's a bit ironic to need to zoom in on a button to even distinguish any quality differences and then giving the quality award to the method that isn't suitable for scaling.
    - skalpelis 15y ago
      The zoomed image was meant to illustrate why the photoshop button was rendered better at default size - it has nothing to do with browser zooming.
      - nxn 15y ago
        I understand that, in fact I mentioned that the aspect of zooming was completely ignored in my first post, and I found it ironic that it was. But anyway, lets forget about that fact for now. If you need to zoom in 400-800x on some pixels to even be able to spot the differences, then in practical terms there are no differences. You can't expect your typical visitor to sit in front of the monitor with a magnifying glass sweating at your pixel perfect buttons. Honestly, no one is going to give it much more than a glance, so attention to detail you can hardly spot with the naked eye is almost completely pointless. Now to come back to my main point: what isn't pointless is maintaining quality when zooming in with the browser. This is something I often do myself when I'm too lazy to put my contacts in to just casually browse the web. Just about every website looks like a mess of blurry/pixelated crap when you do that. Had he just went with the css3 approach, the quality at non standard zoom levels would far outweigh the minuscule pixel details at normal zoom levels between the css3 and photoshop versions. Anyway, that's all I really wanted to say. Had the point been that CSS3 styling was still iffy with older browsers being around and the photoshop button was superior for that reason, I wouldn't have said anything. But to dismiss it based on some differences in pixelation you wouldn't even spot normally, while ignoring that if you had actually zoomed in the browser there would be no pixelation at all with the "inferior" css3 version, was just too much.
pedrokost 15y ago
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. 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).
- lucian1900 15y ago
  Not only that, but they also break when not using a mouse. Or when white backgrounds annoy you and you reverse colours. Or in any number of other cases. Stupid idea, but sadly popular.
- masklinn 15y ago
  > 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. Using Camino (FF3 or FF3.5 engine, something like that) there isn't even a need to zoom in: the alignment is broken by default[0], and when zooming in the button sometimes "tears" out[1] [0] http://imgur.com/5yHZ5 http://imgur.com/5yHZ5 [1] http://imgur.com/fCVhW http://imgur.com/fCVhW
  - oneplusone 15y ago
    Is this still the case? If so I will get it fixed. I didn't do any testing yet because the blog post was not meant to go live yet.
    - masklinn 15y ago
      > Is this still the case? It is.
      - 15y ago
orionlogic 15y ago
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. I will have an eye on this, keep up the good work.
MikeMacMan 15y ago
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.
- oneplusone 15y ago
  That is how this is done. The label is html, only the background is an image.
Pewpewarrows 15y ago
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.
- oneplusone 15y ago
  Author here: I will move the images over to a real host as soon as I can. The blog post was incomplete and only published so some friends could read it over. Wasn't meant to go live at all.
  - heycarsten 15y ago
    Sorry about that :-(

95 points by heycarsten 15y ago

Great tutorial if you want to create buttons form scratch in photoshop with and use css sprites. 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.

nxn 15y ago

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?

ryanf 15y ago
He's zooming in so you can see the pixels. He obviously isn't talking about putting giant, stretched-out buttons on an actual site.
- nxn 15y ago
  Which is not what I'm talking about either. I'm just saying it's a bit ironic to need to zoom in on a button to even distinguish any quality differences and then giving the quality award to the method that isn't suitable for scaling.
  - skalpelis 15y ago
    The zoomed image was meant to illustrate why the photoshop button was rendered better at default size - it has nothing to do with browser zooming.
    - nxn 15y ago
      I understand that, in fact I mentioned that the aspect of zooming was completely ignored in my first post, and I found it ironic that it was. But anyway, lets forget about that fact for now. If you need to zoom in 400-800x on some pixels to even be able to spot the differences, then in practical terms there are no differences. You can't expect your typical visitor to sit in front of the monitor with a magnifying glass sweating at your pixel perfect buttons. Honestly, no one is going to give it much more than a glance, so attention to detail you can hardly spot with the naked eye is almost completely pointless. Now to come back to my main point: what isn't pointless is maintaining quality when zooming in with the browser. This is something I often do myself when I'm too lazy to put my contacts in to just casually browse the web. Just about every website looks like a mess of blurry/pixelated crap when you do that. Had he just went with the css3 approach, the quality at non standard zoom levels would far outweigh the minuscule pixel details at normal zoom levels between the css3 and photoshop versions. Anyway, that's all I really wanted to say. Had the point been that CSS3 styling was still iffy with older browsers being around and the photoshop button was superior for that reason, I wouldn't have said anything. But to dismiss it based on some differences in pixelation you wouldn't even spot normally, while ignoring that if you had actually zoomed in the browser there would be no pixelation at all with the "inferior" css3 version, was just too much.

pedrokost 15y ago

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. 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).

lucian1900 15y ago
Not only that, but they also break when not using a mouse. Or when white backgrounds annoy you and you reverse colours. Or in any number of other cases. Stupid idea, but sadly popular.
masklinn 15y ago
> 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. Using Camino (FF3 or FF3.5 engine, something like that) there isn't even a need to zoom in: the alignment is broken by default[0], and when zooming in the button sometimes "tears" out[1] [0] http://imgur.com/5yHZ5 http://imgur.com/5yHZ5 [1] http://imgur.com/fCVhW http://imgur.com/fCVhW
- oneplusone 15y ago
  Is this still the case? If so I will get it fixed. I didn't do any testing yet because the blog post was not meant to go live yet.
  - masklinn 15y ago
    > Is this still the case? It is.
    - 15y ago

orionlogic 15y ago

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. I will have an eye on this, keep up the good work.

MikeMacMan 15y ago

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.

oneplusone 15y ago
That is how this is done. The label is html, only the background is an image.

Pewpewarrows 15y ago

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.

oneplusone 15y ago
Author here: I will move the images over to a real host as soon as I can. The blog post was incomplete and only published so some friends could read it over. Wasn't meant to go live at all.
- heycarsten 15y ago
  Sorry about that :-(