Dynamic Drive CSS Library- 3D CSS buttons

CSS Library

CSS Layouts

Web Graphics

Free 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:

<style type="text/css">

.rssbutton{
background-color: #ff6600;
border: 1px #ff6600 outset;
padding: 0 2px;
color: white;
text-decoration: none;
font: bold 10px Verdana;
}

.rssbutton:visited, .rssbutton:hover, .rssbutton:active{
color: white;
}

.cssbutton{
background-color: #d1ec4c;
border: 2px #d1ec4c outset;
padding: 1px 4px;
color: black;
text-decoration: none;
font: bold 90% "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
}

.cssbutton:visited{
color: black;
}

.cssbutton:hover{
border-style: inset;
background-color: #e3f48e;
padding: 2px 3px 0 5px; /*shift text 1px to the right and down*/
}

.cssbutton:active{
color: black;
}

</style>

The HTML:

<p>
<a href="http://www.dynamicdrive.com/export.php?type=new" class="rssbutton">RSS</a> 
<a href="http://www.dynamicdrive.com/export.php?type=new" class="rssbutton">XML</a>
</p>

<p><a href="http://www.dynamicdrive.com" class="cssbutton">Dynamic Drive</a></p>

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.