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 4 of 5 pages « First < 2 3 4 5 >

Fantastic stuff.. Just what I was looking for.
Short Term Health Insurance

Posted by Eric on 10/07, 04:56 PM

awesome post..thanks for sharing.
can you please get this code in php??
thank you
regards,
Glyco

Posted by rihanna on 11/12, 10:31 PM

Nice, thanks. I tried George's one and unfortunately it doesn't work with transparent background gifs. you have given nice and beautiful attractive buttons but we are not clear how to implement the same.

Posted by SEO on 11/29, 08:50 AM

Hey, I need your help. I want to put the buttons in the center of the page and not in the left of it. With text-align: center; on. Buttonwrapper does not work. Thank you.
I need an answer today, because I have to hand over the job for the university today.

Posted by Augusto on 11/30, 10:58 AM

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

Posted by kid on 12/14, 12:04 PM

nice code

Posted by watch tv on 12/28, 12:47 PM

very very good

Posted by saintist on 01/22, 01:40 PM

hey. even i have suffered because of low quality optimization service providers but i finally found great seo services

Posted by larry on 02/01, 07:12 AM

@George:
Another difference between your version and this is:
your version cannot be used with transparent images.
Especially on too small or too wide buttons there will be problems.

Posted by hOSHI on 02/17, 04:04 AM

Thanks for the codes. My site transportadora is entirely made in CSS. It will be ver usefull for me these codes. Thanks.

Posted by Josemar on 03/12, 02:52 PM

Comment Pages 4 of 5 pages « First < 2 3 4 5 >

Commenting is not available in this weblog entry.