Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

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 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.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.