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

3D CSS buttons

Author: Dynamic Drive

By using an element's border-style CSS attribute to outset, you can easily create a 3D looking button. Taking it one step further the button can also appear depressed if desired, by switching from a border-style value of outset to inset. The below examples are 100% CSS based, not to mention lightweight:

Demo:

RSS XML

Dynamic Drive CSS Drive JavaScript Kit

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 05/01/2006

Revision History: None

Usage Terms: Click here

Your Comments (32)

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 4 pages  <  1 2 3 4 >

I liked it too.. and its working good on major browsers.. good one
Posted by seo help on 09/12, 04:35 PM
Thanks and I am now thinking to embed it in my new website. :)
Posted by vishal on 12/25, 03:35 AM
Looks good and is very easy to customize. By adding this to li tags in lists you could get some good effects. The rendering of inset and offset is slightly different in IE and Firefox, I personally think that it looks better in Firefox. An interesting idea would be to use an image background instead of block colour...
Posted by Wattersisere on 01/06, 11:05 AM
It looks great, but too simle, can suggest anyfing more
Posted by Download Soft on 01/14, 06:48 AM
very nice.
thank you for this code.
Posted by moussa on 01/16, 08:31 PM
with good colors, good buttons.. thanks
Posted by haber haberler on 02/05, 11:05 AM
I am trying to add 3D css buttons to my website. I am a newbie at this. This is my first project. I don't understand where I am supposed to copy and paste CSS and copy and paste html. There are no installation instructions. I'm very confused. Can anyone please help?
Posted by Gene on 02/16, 05:47 PM
How do you round the edges of the above CSS buttons?
Posted by Michael on 05/12, 06:09 AM
Cool,I like it and feel very nice.
Posted by ntsky on 05/14, 10:43 PM
Nice...but some time i have a problem to create the button that are use for submit form. is there any solution for my problem?
Posted by bali web design on 06/01, 10:55 PM

Comment Pages 2 of 4 pages  <  1 2 3 4 >


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