Firefox buttons for Mac

When developing Firefox extensions that add buttons to the Firefox toolbar, you'd be forgiven for thinking that Firefox would provide a default button image for you to build upon, allowing you to layer your button's icon over the top.

More fool you -- you'll be making the whole thing yourself. This seemed a little bit "ghetto" to me (I'm still hoping that somebody will point out the glaringly obvious page on developer.mozilla.org where copious icon resources are available for us all, but I'm not holding my breath).

So in the meantime I've prepared some blank buttons for you to download.

  • Firefox button in normal state Normal state
  • Firefox button in active state Active state

The .zip file also includes the original Pixelmator file.

Download the Buttons

Modifying the buttons

You'll need to overlay an icon or some text over the top of the buttons. You'll find that your buttons fit in better with the default look and feel if you:

  1. Duplicate your icon's layer.
  2. Offset the lower of the two layers, moving it down 1 pixel.
  3. Re-colour the lower layer to a pale shade of grey and reduce the opacity slightly.

Have a look at this enlarged button that I've been editing in Pixelmator for Wordtracker:

Toolbar button for the Wordtracker Firefox plugin

You want to set the opacity of the drop shadow so that you can barely see the drop shadow when the button is at it's standard size. You're looking for the merest suggestion that the icon is slightly indented into the surface of the button, not a harsh white outline around the bottom of your icon!

Toolbar buttons for other platforms

Windows and Linux are much easier; just provide an icon without a background. See the default icon sets in the relevant XUL_School tutorial to get a feel for what it should look like.

I love feedback and questions — please get in touch on Twitter or leave a comment.