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

This sample is very simple, but it's cool
vote 6/10

Posted by Minh Trung on 05/09, 11:05 PM

Cool Entry,
But it is pretty simple.
Good for beginners though.
6/10

Posted by Matt on 05/23, 09:17 PM

I think these look very nice. :) They look clean-cut and professional. :)

Posted by McKenna on 06/06, 11:35 PM

Nice, but it'd be better if the button changed to a depressed state on mouse down rather than mere roll-over. Can you figure a way to do that?

Posted by Fred on 06/09, 07:25 PM

clean code, fast & best alternative to buttons with excellent look & feel.
Thanks Dynamic Drive, keep it up.

Posted by Jaspal SIngh on 06/11, 05:09 AM

Easy to use and customize buttons. And they look very nice and simple too. They don't look tacky.

Posted by Nikki on 06/15, 04:29 PM

Very nice solution, indeed. I am trying to use it inside a frame as similar sized buttons. when I use the "width" property in the CSS style description for the ".cssbutton" style it works perfect in IE, but not in Firefox, where the size depends on the text length.
Does anybody has an idea?

Thanks, Axel

Posted by Axel on 07/11, 09:18 AM

How do i change these text links to offset http://earthatnight.4t.com all pages

Posted by Ron Battjes on 07/16, 10:24 AM

... where i must copy/paste CSS ?
... where i must copy/paste HTML ?

Type some install notes :(

Posted by confused : on 08/15, 02:48 AM

This is really great. It is of great help. Earlier I was using Javascript for menus but then I came to know that they are not seaqrch engine friendly. So I was looking for some CSS scripts. Thanks I got yours.

Posted by Mandar on 08/21, 01:49 AM

Comment Pages 1 of 4 pages 1 2 3 > Last »

Commenting is not available in this weblog entry.