Today I was asked to create better looking buttons for the project I’m working on “just like those one on the Apple website”. To be fair my first attempt was looking pretty poor so I decided to correct it.

In the past I’ve gone down the route of creating a nice looking base image (which probably took me an age) and saving it out many times based on the text; but 50+ buttons later that soon became extremely annoying! I’ve used the sliding doors technical a couple of times but with the spans and links that just doesn’t sit with me, especially as buttons are a constant reoccurring element in our web applications.

After a quick Google I found this page by ZURB: Super Awesome Buttons with CSS3 and RGBA, a simple use of CCS3 and viola! The buttons look decent enough in IE and they’ve even gone to the effort of creating extra classes so basically you pick your size, colour and you’re done!

I’d be please to hear what techniques anybody else is using?