There might be an add-on or theme that offers this feature, among others. I haven't searched for one.

Generally speaking, there are two other approaches to customizing the browser's chrome: (1) style rules in the userChrome.css file, or (2) style rules in the Stylish add-on.

I can write a style that is partially successful: it bolds the text of the buttons when hovered. However, the background color doesn't change as specified:

toolbarbutton.bookmark-item:hover {
 font-weight:bold !important;
 background-color:green !important;
}

Someone else will need to chime in on whether there is a secret to this or whether it's futile.

Thanks. Yes, I'm looking for the specific CSS to use in the userChrome.css. Couldn't find a complete CSS list of rules or more detailed info on the Bookmarks Toolbar. For myself, the current rules add too much padding and too much rounding on the corners.

Hey, I've tried your CSS and it worked! :) Green background and added -moz-border-radius:0 > all good!

You beat me back to this thread. If you are using Stylish, I think this extra line is needed, at least on Windows:

Okay, I think I found it. You have to disable the platform-specific theming in order to style the buttons yourself:

toolbarbutton.bookmark-item {
   -moz-appearance:none !important;
}

As far as other style rules, I think then you would be able to use border, margin, and padding rules just as you would for an input type button.

Thanks again. Don't want to go into massive customization, just that hover effect. Changed the background color and border radius... all good. I'll keep this info for future reference. Used userChrome.css. While using the above rules you can change the hor padding on links, the vert can't be overwritten. Didn't dig too deep though.

You may need to use the padding on the .toolbarbutton-text selector.

#personal-bookmarks .bookmark-item > .toolbarbutton-text {}