Changing Color Of Rounded Corners Button With Css

thanks a bunch in advance! i was able to make a rounded corner button using CSS. i like to be able to mouseover the button, and the entire thing changes its color, not just the inn

Solution 1:

Stu Nicholls's site css play has a lot of examples of how to do this without javascript. It's a really excellent resource.

Solution 2:

I replaced the outer div with a link and added a little bit of CSS.

HTML

<aclass="nav_menu"href="index.htm"><bclass="top_menu"><bclass="top_menu1"><b></b></b><bclass="top_menu2"><b></b></b><bclass="top_menu3"></b><bclass="top_menu4"></b><bclass="top_menu5"></b></b><divclass="top_menufg"><!-- content goes here -->
  Home
 </div><bclass="top_menu"><bclass="top_menu5"></b><bclass="top_menu4"></b><bclass="top_menu3"></b><bclass="top_menu2"><b></b></b><bclass="top_menu1"><b></b></b></b></a>

CSS

.nav_menu {
 text-align: center;
 color: #353535;
 font-size: 20pt;
 font-family: Verdana, Geneva, sans-serif;
 float: left;
 width: 33%;
 text-decoration: none;
}
/* For rounded boxes */.top_menu {
 display:block
 overflow: hidden;
}    
.top_menu * {
 display:block;
 height:1px;
 overflow:hidden;
 font-size:.01em;
 background:#AAAAAA
}    
.top_menu1 {
 margin-left:3px;
 margin-right:3px;
 padding-left:1px;
 padding-right:1px;
 border-left:1px solid #AAAAAA;
 border-right:1px solid #AAAAAA;
 background:#AAAAAA
}
.top_menu2 {
 margin-left:1px;
 margin-right:1px;
 padding-right:1px;
 padding-left:1px;
 border-left:1px solid #AAAAAA;
 border-right:1px solid #AAAAAA;
 background:#AAAAAA
}
.top_menu3 {
 margin-left:1px;
 margin-right:1px;
 border-left:1px solid #AAAAAA;
 border-right:1px solid #AAAAAA;
}
.top_menu4 {
 border-left:1px solid #AAAAAA;
 border-right:1px solid #AAAAAA
}
.top_menu5 {
 border-left:1px solid #AAAAAA;
 border-right:1px solid #AAAAAA
}
.top_menufg {
 background:#AAAAAA
}
a.nav_menu:hoverb, a.nav_menu:hoverdiv  {
 background-color: #888888;
 cursor: pointer;
}
/* For rounded boxes */