Dynamic Drive CSS Library- CSS Oval buttons

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

Social Media Applications

PSD to HTML

Web Templates

Website Hosting

HTML Editor

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 (28)

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

Worth spending some time!

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

Hi you lost me.

I can not seem to get the download:
"The images used: Choose the desired set to download (2 images total):"

Where do I download the files?

Posted by BYron on 06/15, 07:44 AM

For those asking hot to use these buttons inside a form the answer is javascript.

Just create a real button next to it, that isn't visible and in the onclick on the CSS-buttons span make it click the real button instead.: 'document.getElementById('realbutton').click()';

(You have to set href on the anchors to 'javascript:return false' or something though to stop it's link functionality)

Posted by Henrik Balsnes on 06/17, 05:57 AM

i need to use this style for the input tag..
i tried always only the left half is displaying.. where should i mention the span for the right half to be displayed...

Posted by arun on 06/23, 03:41 AM

I liked the idea.
but the colors just dont do it to me.

Posted by online fx trading on 07/15, 01:41 AM

George's version is nice, and I agree it's simpler. But it appears to use only a single image, and wouldn't adjust for abnormally long text like this one does.

Posted by Digital Jedi on 07/19, 06:34 PM

Right click on the images and save them, BYron.

Posted by Digital Jedi on 07/21, 07:27 AM

how can we put the tags or codes of the css on macromedia dreamwaver. we already try it but it did'nt run.. somebody help us. pls.. tnx

Posted by chen on 08/13, 09:45 PM

Comment Pages 3 of 3 pages « First < 1 2 3