g
Printer Friendly Version

editor  
BellaOnline's HTML Editor
 

Advanced CSS Buttons

In a previous article I discussed the basics of designing navigation buttons without using images – buttons that are purely CSS- and HTML-driven. Now it's time to look at some ways to fancy up those buttons.

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!

This site needs an editor - click to learn more!

HTML Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact Editor Wanted for details.



| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor