First, how about a three-dimensional look? It's surprisingly easy to add. Just set the button div's borders so that the top and left borders are lighter than the background color, and the bottom and right border are darker. The code will look something like this…
.button {
Background-color: #FF0000;
Color: #FFFFFF;
Text-align: center;
Border: 2px solid;
Border-color: #FF9966 #993333 #993333 #FF9966;
}
… and your button now looks like this:
TEXT
Next, let's move on to some dynamic effects. Thanks to the CSS :hover pseudoclass we can incorporate a rollover effect that will generate the appearance of the button pressing down when your visitors roll the mouse pointer over it. First, we'll need to switch techniques slightly by using a link tag instead of a div to hold the button. Your code will now look like this:
<a href="#" class="button">TEXT</a>
Now switch your CSS rules to this…
.button {
Background-color: #FF0000;
Color: #FFFFFF;
Text-align: center;
Padding: 2px;
Border: 2px solid;
Border-color: #FF9966 #993333 #993333 #FF9966;
Text-decoration: none;
Display: block;
}
a:hover.button {
Border-color: #993333 #FF9966 #FF9966 #993333;
Background-color: #CC3333;
}
You'll notice a few minor changes to the .button class definition that smooth the transition to a link tag. The padding puts some space around your button's text, and setting text-decoration to "none" stops your browser from underlining it. Finally, setting display to "block" causes the browser to treat it as a structural object rather than a text object. This keeps your borders from being lost if you use small text in the button.
The information in the a:hover rule does two things. First, it switches the border colors around so that the top and left borders are now darker while the bottom and right borders are lighter. Second, it darkens the button's background color to enhance the illusion. As a rule, darker objects look farther away than lighter ones – it's a common optical illusion that we can put to good use through this technique!
