Clean Toolbar Buttons

Part of the User Interface (UI) redesign in Firefox 4 for Windows was new buttons with borders around them to make them look like well, buttons. Below you can see what the default toolbar buttons look like in Firefox 3.6 and Firefox 4 (and newer).

Toolbar Buttons Firefox 3.6

Toolbar Buttons Firefox 4.0 (and newer)

Some people prefer the cleaner look without the borders as was the case with the Firefox 3.6 UI.  Add the following lines to your userChrome.css file (directions) and restart Firefox:

/*Removes toolbar button Shadows*/
toolbar .toolbarbutton-1 { border:0!important; box-shadow:none!important; background:none!important;}

Upon restart your Firefox toolbar should look something like this:

'Clean' Toolbar Buttons Firefox 4.0 (and newer)

Note: Buttons that have a drop-down menu, such as Greasemonkey are not affected by this tweak. I am looking into this still, but for that button I just moved it down to my add-ons bar.


Leave a Reply