Printed from BasicTips.com, FREE helpful articles and tips for Webmasters and Business Owners
Copyright © 1994-2006 by BasicTips.com, a division of BasicTemplates.BIZ
All rights reserved. Republication in whole or in part in any form is not permitted.

Sponsored by BasicTemplates.BIZ
Website Templates with External CSS and Removable Graphics
http://www.BasicTemplates.biz

Co-Sponsored by Effective-Website-Secrets.com
Teaching webmasters effective web development and marketing techniques via free podcasts.
http://www.Effective-Website-Secrets.com

Category: CSS
Create 3D Buttons with CSS
By BasicTemplates with External CSS

Designing a professionally styled web site does not always mean you need fancy graphics. In fact, if you take a close look at most of the high-profile corporate web sites that set the web design industry trends, you will find minimal graphics and the use of CSS rather than graphical buttons. So how do these types of sites utilize a 3D button-type link using CSS? We will show you one method in this CSS article.

Using a custom class in an example below, notice the border color. Do you see the color code sequence of white (#FFFFFF) and medium gray (#666666)?

.bt3dbuttons {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border-color: #FFFFFF #666666 #666666 #FFFFFF;
background-color: #CCCC99; border-style: solid;
border-top-width: 1px; border-right-width: 1px;
border-bottom-width: 1px; border-left-width: 1px;
}

The border is 1 pixel solid and the order of the border color is "top-right-bottom-left". This means that the top and left border color is white and the bottom and right sides of the border are dark gray giving the effect of a convex (coming toward you) effect for a textual button. This is more effective when the text link is on a colored background than if it were only on a white background.

Changing the border size, color and location ("top-right-bottom-left") will also change the appearance of your button including giving it a concave appearance instead of a convex. Use this color order to switch your button to a concave (inward) effect: #666666 #FFFFFF #FFFFFF #666666

To make the hyperlink change color, add a hover style as described in our article, "Link Rollovers with CSS". The example code below uses a:hover with no underline (reference our CSS article, "Removing Link Underlines with CSS") in a dark red color (#990000).

a:hover { color: #990000; text-decoration:none; }

Convex 3D CSS Button
Concave 3D CSS Button