Buttoning CSS

I spent most of this morning designing buy buttons to work with fotomoto on my photo website. At first I went for a design that fitted in with the rest of the website, but then I decided to check whether this was a good idea. It turns out that actually the button should be very different to the rest of the site and stand out. (At least according to the articles I read).

So then I redesigned the buttons with a bright colour.

I think probably I will use the relatively plain green one in the top left corner. Although the button can be made in CSS3 (you would still need the picture frame image though), I can't really see much point. You need a fallback image for IE anyway, so might as well just use that.

There is no difference in number of HTTP requests between full button image only vs. frame image + CSS3. There is a big difference in size between the two images (5.21KB vs 1.56KB). However, I don't think 4KB will make much of a difference really. Maybe I will just use the full button image to start off with, then work on getting a CSS3 version done.

Well, after trying to implement the images, I found a problem I had forgotten - IE6's lack of support for PNG alpha transparency. So I changed the button images to include the website background colour, and saved as 8bit PNG with no transparency. Now the button images are 2KB, so not a lot of difference to the image size needed for a CSS3 solution. But I really don't like using images that only work with one specific background colour, so it actually gives me more reason to try and implement a CSS3 solution.

I spent most of the afternoon and quite a bit of the evening trying to work out how to get the buttons positioned how I wanted them using CSS.

Although I had been doing quite a bit of button positioning testing in IE6, it seems I neglected to actually test the buttons. When I clicked the button, I got a message that Fotomoto doesn't support IE6. Doh! I still get 5-6% of users on IE6, so not a disaster, but not great either.