Implement a Site Actions button using only CSS with no images

I recently implemented a site actions menu that has the appearance of a button with a roll-over effect. The original specification called for the use of two images, one for regular state and another for roll-over state. The problem that I had was that I could not easily get rid of the text or the drop-down arrow of the site actions menu without messing up the appearance of the menu.

This solution assumes that you are using a style sheet that overrides the site action menu styles that are defined in core.css.

My solution was to abandon the images, and replicate the effect using CSS. Here is the CSS code that I placed into my own style sheet that overrides the styles in core.css.

.ms-siteactionsmenu
{
white-space: nowrap;
font-size: 12px;
color: #808080;
padding: 0;
border: none;
cursor: pointer;
}
.ms-siteactionsmenu div div div
{
background-image: url();
background-repeat: no-repeat;
border-top: 2px solid #cdcdcd;
border-left: 2px solid #cdcdcd;
border-right: 2px solid #858585;
border-bottom: 2px solid #858585;
background-color: #e0ddce;
padding: 1px 4px 3px 10px;
}
.ms-siteactionsmenu div div div a
{
color: #808080;
font-weight: bold;
text-decoration: none;
}
.ms-siteactionsmenu div div div.ms-siteactionsmenuhover
{
background-image: url();
border-top: 2px solid #cdcdcd;
border-left: 2px solid #cdcdcd;
border-right: 2px solid #858585;
border-bottom: 2px solid #858585;
background-color: #c8c5b8;
}

The trick here is to empty out the background-image styles so that the images that core.css loads do not show over your button, and to define the borders around the buttons so that the left and top borders have a slightly lighter shade and the right and bottom borders have a slightly darker shade.