styling firefox extension button with background

so I'm building a custom firefox extension and I got to the step where the toolbar is showing up and I put in buttons etc with css

If you look at feedly's button (Feedly is a firefox exte开发者_开发百科nsion), there is this nice rectangular background behind the button of the extension that makes it look like a legitimate clickable button: http://imageshack.us/photo/my-images/196/feedly.png/

whereas default extension buttons have no background behind it....

how do you style a custom extension button such that it has a button-like background just like the feedly button?

The <toolbarbutton> element has an image attribute that allows you to specify an image:

<toolbarbutton image="chrome://.../icon.png" label="My button"/>

However, usually you want to set the image from CSS using the list-style-image property. For example if your XUL code looks like this:

<toolbarbutton id="myButton" label="My button"/>

You would have the following CSS code:

#myButton
{
  list-style-image: url("chrome://.../icon.png");
}

More info: https://developer.mozilla.org/en/XUL_Tutorial/Adding_Labels_and_Images