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 2 of 5 pages < 1 2 3 4 > Last »

Nice, thanks. I tried George's one and unfortunately it doesn't work with transparent background gifs.

Posted by robvdv on 02/26, 05:12 AM

Is there a way to get these buttons to center inside a TD?

Posted by maapodac on 03/03, 12:28 PM

Hi,

Good tutorial. Any question: How can I center a group of buutons ?

I need to do something like:
a text parraph
<div>buttons centereds</div>
other text parraph

Thanks,
Federico

Posted by Federico Gonzalez on 03/04, 11:20 AM

Hey, I want to make it so after a person hovers over the button, it stays in the darker color. Can I and how would I be able to do that?

Posted by Gordo on 04/14, 07:10 AM

what would be the code for a submit button inside a form?

Posted by Mark on 05/11, 05:36 AM

also, if used in conjunction of another *.css, how can I make it not show the other *.css link color as well as not show a underline on the hover?

Posted by Mark on 05/11, 06:54 AM

I just did it using a search engine optimization company ! It is cheep and good quality !

Posted by Flavian on 05/26, 08:10 AM

Thanks a lot to this website, and i learn a lot from here and also helps me a lot!
Thanks!

Posted by Dream on 05/30, 12:12 AM

This is very useful. 2 comments:

- Be sure to use   for spaces in your button text.
- As others have stated, the buttons fill the width of their container, so they can't be centered in a td or div. Any ideas on centering?

I found http://glassybuttons.com very useful to generate some buttons.

Posted by Chris Elliott on 06/04, 01:46 PM

Worth spending some time!

Posted by caustic576 on 06/14, 11:37 AM

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

Commenting is not available in this weblog entry.