Hello,

I created a rounded box/button and sliced its first corner, the middle bar (which repeats horizontally to adjust the width of the button text/content) and the last corner and used following markup:

<div id="left-corner"></div>
<div id="middle-bar">About Us</div>
<div id="right-corner"></div>

These divs have corresponding images from CSS and are floated left. Those three divs create a single rounded button wiht text About Us which is fine.

Problem:

I have also created similar three slices of hover images but I wonder how to apply hover to those buttons because if I use :hover with these hovered slices, then even hovering on corner images also creates hovering effect. One alternative is to use fixed width buttons and slice buttons completely but I do not want to do that.