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.
-
Normal state
-
Active state
The .zip file also includes the original Pixelmator file.
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:
- Duplicate your icon's layer.
- Offset the lower of the two layers, moving it down 1 pixel.
- 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:
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 feel free to get in touch on Mastodon or Twitter, or leave a comment.