About button design

Last week, I had been doing some UI design which consists of many buttons. When the first time I did for review, they said my button is too flat and not delicious enough to click. Hmmm okay.. Actually it is hard to judge a good button design but certainly is lack of research material out there! So what makes a good button? Actually I also not very sure. After that review I tweaked my button design and some of them shown above.

I used a lot of blend modes to achieve the 3D effect above for example: Drop shadow, gradient overlay, bevel and emboss, inner shadow, inner glow, stroke, outer glow…. Wow that’s a lot, and sometimes, several layers is needed to make a button. It is quite troublesome huh? But i quite happy with the outcome until the next review :P.

Good button examples

Actually I had three buttons in mind that I think is very good button. First up the Apple button, the glossy effect is really stand out from the rest (Example shown is firefox’s macfoxgraphite theme). Next is the Iconbuffet button. It is bold and contrasting color with the big and clear text, located in big whitespace, which makes it nice element to the page design too. And final, actually I don’t want to credit this but, the button is really well executed! Introducing the popular fart button. The button is very dominating and 3D realistic! But I never clicked it.

Free online button generator

Sometimes, let the app do the button design for you, haha. Cool. Below are some websites that offering this service.

1. Buttonator - drag and drop web buttons (need pay thou for more option)
2. Adam Kalsey’s Button Maker
3. My Cool Button - Web 2.0 free button maker!
4. YaBB Button Generator - flash based generator. Slick but IMO it’s not very convenient.

5. Button maker web - I think this is far most the best button generator site. It has the most options and variation of designs available. Sadly it’s only in Japanese currently.

Extras

In the meantime of writing this post, DesignWalker posted an article about ways to execute icon’s shadow effect which is quite comprehensive and inspiring which I think is applicable to button design as well. Click here to read and grab the free useful resource file. Plus, Alex Griffioen’s How to make sexy buttons with CSS article, which i think is quite useful.

• 10 simple ways to make glossy button
• Creating cool push button in Photoshop
• 60 horizontal navigation bar design inspiration
• 9 Japanese designers’ flash portfolio that you should see
• Creating opacity gradient mask in Flash 8