logo

Adding The Edge To Your Button Images

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

image

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:

image

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

image

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.

Comments

  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?

      Hide the rest of this thread

      1. Yes. You just need to store the alpha channeled images as separate resources and combine them as needed. Most modern browsers have no trouble with it.

        Another neat trick for auto-generating images... create three images with different alpha layers that are n width where n is a different prime number for each. Use all three for your background image and you'll have a non-repeating pattern from just three small elements.

      2. Most of my projects are designed so that the customer can administer it via the web. That means that if they add a new page it appears in a menu somewhere on the site.

        So far my navigator buttons use no graphics ... they just use standard HTML UL LI elements with some simple CSS to style them.

        But I've always wanted to add the nice buttons like you're talking about but they have to be generic so that they will generate dynamically on the Domino server some way. (I suppose it could be done on the client side with JavaScript but then I've got to contend with browser incompatibilities.)

          • avatar
          • Jake Howlett
          • Thu 8 Sep 2011 10:09 AM

          There are a few tricks you can use there. I guess you just want to show some text over the top of the button graphic. Troubles start when the length of text outgrows the button. Ideally you'd stop that happening. If not you can do things like split the button in two and have markup like this:

          <a href=""><span>Link</span></a>

          Then put the first part of the button background in the A tag using CSS and the other part to the right of the SPAN's background using CSS.

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

    http://www.red-team-design.com/just-another-awesome-css3-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

    http://www-12.lotus.com/ldd/doc/oneuidoc/docpublic/components/buttons.htm

    • 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

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Wed 7 Sep 2011

Share This Page

# ( ) '

Comments

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