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