Hi all

 

Hope everyone had a great Christmas. I want to find out people's opinions on CSS buttons.

 

Obviously in light of Google's new interest in loading speed, this topic fits quite nicely. How do people think buttons are best done from both a usability and speed perspective?

 

- Sprites?

- Preloaded rollovers?

- JavaScript?

 

I have been considering sprites, because it only involves one image loading, however, I'm still researching and testing the browser compatability of them.

 

Any advice/suggestions would be grand.

 

Regards to all

 

ST

I normally use sprites, because number of requests have a huge impact on page load times. Having one request is better than several preloaded rollovers (which is normally done by JavaScript anyway).

 

I've normally found that the total size of several images is more than the size of the sprite anyway. So in the end sprites are the best option for me.

 

Of course it all depends on your navigation at the end of the day, sometimes all you need is a 1x40 pixel gif file that contains both the hover and normal state background.

Hi MrBrightside

 

Thanks for the reply, sounds like Sprites are the way to go, have you ever experienced browser compatability issues at all?

 

Thanks

 

ST

Hi,

 

Not sure what you guys mean by sprites.

 

What I use is the sliding doors technique - one image with 2 states and offset coordinates.

 

See the following tutorial: http://www.alistapart.com/articles/slidingdoors/

 

Hope it helps.

 

Jo

As far as I know there are no browser compatibility issues with sprites because they use simple CSS properties that all browsers should understand:

background-image, background-position and background-repeat

 

If you're having trouble making sprites, then you could try this Sprite Generator, which I've used in the past. It takes a series of individual images, and creates a sprite for you.

Thanks for that, I'll take a look.

 

Josoap - I think the article you provided is pretty much what we are describing, using CSS to create rollovers using on image only.

 

Not seen the article you provided, I shall have a read - cheers!

 

Regards

 

ST

I just took a look at the tutorial, and though it explains the sliding doors method well I'm pretty certain that you could come up with the same effect using just one image instead the 4 used in that tutorial!

 

I'm busy right now, but maybe I'll try it out later and post up some results

Use CSS styled text links - it's amazing what you can achieve. I'd steer clear of javascript if you've got any choice, and stock buttons look BAD.

CSS Sprites are the easiest, most versatile and best for load speed (Also if you want to get a high YSlow grade).