Well, the :hover is applied to the containing <div>
element, not the individual <a>
elements, which is what you'll need to do in order to show the hover effect on only that portion of the button.
I've created a fiddle to show how you might do it: http://jsfiddle.net/TJG8G/
EDIT
What I did...
Best bet would be to diff your original CSS and mine but the main points are:
- No :hover styles on the container. Apply the
:hover
CSS from the container to the<a>
elements instead. - Set the
<a>
elements todisplay: inline-block
- Muck about with the padding and line-height
<a>
elements and remove the padding on the h2. - Adjust the border radius rules on the individual A elements (so that the left A only has a curve on the left and the right A has the curve on the right.) This also required adding a class to the second a.