Dynamic Drive CSS Library- CSS Oval buttons

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Links & Buttons: Here

CSS Oval buttons

Author: Dynamic Drive

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, we've created 5 different colored ovals buttons to get you on your way!

Demo:

Submit Reset Confirm Cancel I Agree Decline

Dynamic Drive CSS Library JavaScript Kit

The images used: Choose the desired set to download (2 images total):

Gray oval (2 images):

Blue oval (2 images):

Green oval (2 images):

Red oval (2 images):

Orange oval (2 images):

The CSS:

<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 HTML:

<h4>Single button:</h4>

<div class="buttonwrapper">
<a class="ovalbutton" href="http://www.dynamicdrive.com/style/"><span>Dynamic Drive CSS Library</span></a>
</div>

<h4>Side by Side:</h4>

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

Code Info

Rate this code:

Date Posted: 12/02/2007

Revision History: None

Usage Terms: Click here

Your Comments (47)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 5 pages 1 2 3 > Last »

i think my way is better.. it uses no floats inside it and that makes the outer div useless. Check it here:
http://www.jorkas.com/lab/css/rounded_button/index.html

Posted by George on 12/03, 04:15 PM

Looks good George! I've seen quite a few different techniques for creating such buttons, float or no float. Are there any known caveats to your method as far as you're aware?

Posted by ddadmin on 12/03, 05:54 PM

I'm not aware of such.

Posted by George on 12/04, 12:01 AM

This looks good but they are not actually input buttons but graphical links. Also when you increase the text size in the browser your "buttons" break.

Do you know a way of making dynamic graphical input buttons?

Posted by Ryan on 12/05, 04:17 AM

@Ryan:
I've always used a different approach with this... There's this HTML element people tend to forget about: BUTTON. You can always do something like this:


<button><span><span>Label</span></span></button>

It's true you have to add two extra tags, but this is the only way to achieve this. I tried to add only one <span>, but the results were not as expected. This method degrades nicely for Safari too, as it looks like a normal button (as far as I remember). It's sort of "sliding doors" for buttons.

The downside (another one) is that you don't have hover support in MSIE6. However, you do have basic form support, so you don't have to use JavaScript to submit the form.

Posted by Vlad on 12/05, 05:13 AM

You've fixed the height of the ovals so resizing the font in the browser breaks the buttons. You need to split the background image into 4 corners, not 2 ends, so that the corners expand independently.

Posted by Chris Garrett on 12/05, 08:51 AM

@Vlad

I have experimented with the <button>Content here</button> method and have found that there is a problem with IE 4+ that adds extra padding on the button tag and this cannot be removed. I have tried everything I can think of to remove the padding and have only succeeded in making the button look very hacked.

Posted by Ryan on 12/12, 02:43 AM

Hi,
I worked on on my example and added <button> support. Now you can add round corners to <button> and (@Jay) easily center them in any container:
http://www.jorkas.com/lab/css/rounded_button/index.html

Posted by George on 12/14, 02:19 PM

I forgot to mention that you have to place 2 spans in the button :(

Posted by George on 12/14, 02:20 PM

Hello,
The above helped me but i was looking for the sidebar header to be in oval or other shapes..
can you tell me how to do so..
Thanks

Posted by pics n wallpapers on 02/16, 02:28 AM

Comment Pages 1 of 5 pages 1 2 3 > Last »

Commenting is not available in this weblog entry.