Adding The Edge To Your Button Images

Which one of these buttons looks best? More button-like if you will?


Obviously "better" is a subjective term but most would agree it's the bottom-most one?

Until now, whenever I've created my own buttons using Fireworks (as described here) I've always just used a flat button, like the topmost one of the three above.

Then I saw these "glossy" buttons on Fireworkslabs.com and got curious how they got them looking so buttoney:


To work this out I download the (editable) PNG file from their site and picked the button apart, as you can see below:


All it takes to make a normal gradient-filled rounded-rectangle look like a glossy button is to add a 1px white inner border and a half-sized semi-transparent rectangle over the top of it.

I made that sound a bit easier than it is, but it's not much harder than it sounds. If I could be bothered I'd take screenshots of the whole process, but that would takes ages and I'm sure you can work it out for yourselves.

So there you go -- add some edginess to your buttons from now on. I know I will.


  1. Cool. I'll have to try that. Thanks for sharing it.

    • avatar
    • Aaron Hardin
    • Wed 7 Sep 2011 01:01 PM

    Me too, I like it!

  2. All my navigator buttons are dynamically generated from the Domino database. Can these be generated dynamically?

      • avatar
      • Jake Howlett
      • Wed 7 Sep 2011 02:35 PM

      Generated? How so?

      Show the rest of this thread

  3. Hi Jake, have you seen these CSS3 generated buttons:


    It's impressive what you can do with CSS3 - and thereby avoid the use of button images.

      • avatar
      • Jake Howlett
      • Thu 8 Sep 2011 03:34 AM

      Hadn't seen those buttons (thanks) but am semi-aware of what CSS3 is capable of look forward to the day (in 2 or 3 years?) when it can be used widely in confidence.

  4. .lotusBtn I would say or even .lotusBtn .lotusSpecial


    • avatar
    • Jaap
    • Fri 9 Sep 2011 02:31 AM

    Great article Jake, reminds me to the time I was doing embossed/indended lines etc. with a thin white and light gray line near to each other on a dark page background ;-)

Your Comments


About This Page

Written by Jake Howlett on Wed 7 Sep 2011

Share This Page

# ( ) '


The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social

About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content