Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

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:


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:

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:

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.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.