Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web 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:


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

wow cool effect, i like this, thanks man
Posted by andra on 03/15, 02:31 AM
Thanks for sharing, so interesting and usefull !!!
Posted by bwin on 03/16, 01:48 AM
Heyya!

Very nice, but why use float: left? display: inline-block will do the trick and you wont have to use any tricks to control the floated element.
Posted by Nick on 04/13, 10:13 AM
This menu style is quite cool. Thanks for all the error correction as well to all.
Posted by Rahul on 05/03, 11:13 PM
Very good!
Great post
kisses
Posted by moda on 05/18, 06:58 PM
It doesn't work even adding de import directive missing in the example.
Posted by cssman on 05/19, 03:21 PM
Cool effect - very useful. Thanks for sharing!
Posted by betclic on 05/26, 09:58 AM

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


Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.