CSS Buttons nice

[Web Global Net]

These buttons use the sliding doors technique of CSS, plus two sliced background images with "on" and "off" states, to create flexible oval shaped CSS buttons, similar to CSS Square Buttons. Each button can accommodate text of variable widths and supports a hover effect when the mouse rolls over it. The only limitation is the height of the button, which is fixed based on the background image's height.

For your convenience,2 different colored ovals buttons are attached to get you on your way! You can use a graphics program to change the Hue-Saturation - Lightness to change them to what you like - just save them as different names and adjust the style code to the file name.

Code:

<style type="text/css">

a.ovalbutton{
background: transparent url('media/oval-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 13px Tahoma; /* Change 13px as desired */
line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 24px; /* Height of button background height */
padding-left: 11px; /* Width of left menu image */
text-decoration: none;
}

a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{
color: #494949; /*button text color*/
}

a.ovalbutton span{
background: transparent url('media/oval-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
}

a.ovalbutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.ovalbutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}

</style>

Note: The image paths referenced in the CSS above assumes you're using the gray ovals. If you're using another, be sure to update the image paths accordingly.

The trick here is to use the <span></span> Tag around the text with no class attached to it.

<h4>Single button:</h4>

<div class="buttonwrapper">
<a class="ovalbutton" href="http://reunionmanager.net"><span>CSS Library</span>[/url]
</div>

<h4>Side by Side:</h4>

<div class="buttonwrapper">
<a class="ovalbutton" href="#"><span>Submit</span>[/url] <a class="ovalbutton" href="#" style="margin-left: 6px"><span>Reset</span>[/url]
</div>