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

I adore these! Simple and organized, they make a nice addition to any page. :) Great work.

Posted by McKenna on 06/04, 04:04 PM

Very easy to apply...professional work ya..

Posted by ganesh on 06/13, 02:09 AM

Great, simple and easy to understand - these are the words I can use to describe this example! It was totally fantastic example, which made thinks much easier and clearer. 10

Posted by Konrad on 07/05, 02:37 AM

Very neat trick. Only one small issue ...

Unfortunately the text falls outside the button background when the browser is zoomed in or out. Any way around this?

Posted by Phil on 07/12, 08:54 AM

very, very simple THANKS

Posted by EricV in Fila de Mariche Caracas on 07/25, 04:27 PM

Nice and simple buttons. Very cool :)

Posted by Leo on 08/06, 03:23 PM

very smart tip..thanks

Posted by root123 on 10/15, 05:11 AM

Interesting. Just getting back into CSS, so some of the code is a little confusing. But I'll try it out and see how it really works. Thanks for the tip.

Posted by Mondy on 10/28, 12:10 AM

hai

i have two links intially that links are in some colour when i click on 1st link the color will change in another. when i click 2nd link the color will change. but the 1st link colour will goes to intial colour

Posted by sivasankari on 03/12, 03:27 AM

Cool - We've just used the above solution - great and thanks

Posted by Joomla on 08/18, 12:21 PM

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

Commenting is not available in this weblog entry.