Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us info@westciv.com.

quick tutorials

CSS buttons

Why use Javascript to create a simple button effect for links in a navigation panel when you can do this so easily with beautiful, standards-based CSS? Here's an example of what you can do. The following tutorial is based on this example. I've placed links throughout this recipe to relevant parts of our CSS Guide for those who want to know more about what's going on with the selectors and properties I've used. You'll probably find this tutorial a lot easier if you are already familiar with my links tutorial.

The HTML

I've seen CSS buttons done in a number of different ways, but the method which I think works most reliably uses the cleanest, most standards compliant HTML you can imagine. Here's the code for the top four buttons in the demo example.

<div id="navigator">

<p class="housebutton"><a href="../buttons.html">Buttons Recipe</a></p>

<p class="housebutton"><a href="../index.html">CSS Cookbook</a></p>

<p class="housebutton"><a href="../../CSS_gallery.html">CSS Gallery</a></p>

<p class="housebutton"><a href="../../index.html">House of Style</a></p>

</div>

Quite simply, you take the collection of links which you want to make into buttons, put each link inside separate <p> elements with a class attribute, then put all of these <p> elements inside a <div>. And that's it. You can close your HTML document now because the rest of the work is all done in the style sheet. Of course, you'll need to make sure that the HTML document is linked to the style sheet you are working on, but I know you'd never forget to do that :-)

Create the selectors

Here's the selectors you need, in the order in which we're going to work on them

So, to start with, if you were working with the HTML above, your style sheet would look like this. Get those selectors right to start with and you save a lot of tears later.

#navigator {

}

.housebutton {

}

.housebutton a {

}

.housebutton a:hover {

}

Create the properties

Now working one declaration at a time, I've firstly given #navigator a few simple properties

So it will look like this.

#navigator {

background-color: #7ea8cf;

border: 1px #666666 solid;

width: auto;

margin-top: 100px;

margin-left: 37.5%;

margin-right: 37.5%;

padding: 8px;

text-align: center;

}

The next declaration, .housebutton gives the basic appearance to the buttons,

The margin-top and margin-bottom simply puts a little space between the buttons as I think this accentuates their "buttony nature". Sometimes you might prefer to put a margin of zero between them for a slightly different effect. The declaration looks like this when I'm finished.

.housebutton {

font-weight: bold;

text-align: center;

margin-bottom: 3px;

margin-top: 3px;

}

The contextual selectors are what we use to create the button effect. The first one, which will describe the appearance of the link before the mouse moves over it, needs the following properties

Fantastic product, I've gone from knowing nothing about web-design, to creating compliant XHTML and CSS.

David Perkins, Happy Monsters

I might go into a little explanation of what's happening with color there, and then I'll outline the technique I've used to actually find the colors I chose.

Most contemporary operating systems use a sort of 3-D effect in their user interface. Windows and buttons look like three dimensional objects with the imaginary light source consistently coming from the top left hand corner of the desktop. That's why we create the border edges with top and left being a little lighter than the face of the button (if the button was in fact a raised object the light would be shining more brightly on these edges, no?), and right and bottom being a little darker (the imaginary light would not really be shining here at all, they would be in shadow).

Finding the colors is relatively easy if you create this style sheet with a WYSIWYG CSS Editor like Style Master, as you can simply use the color picker from the operating system. All you have to do then for the lighter and darker edges is base your choice on the background-color of the button face then increase or decrease the lightness. Hint: it works best when the differences in brightness between the three colors are surprisingly small.

So, the declaration in my example looks like this

.housebutton a {

padding: 4px;

text-decoration: none;

display: block;

color: #224059;

background-color: #b5c9e2;

border-top: 2px #cce3ff solid;

border-left: 2px #cce3ff solid;

border-bottom: 2px #31557f solid;

border-right: 2px #31557f solid;

}

Now all you have to do with the last selector is describe what will happen to the button when the mouse moves over it. (Note - you can make buttons that behave like buttons only when the user actually clicks on them. Instead of a:hover, use a:active.) You don't have to worry about most of the properties we already created for .housebutton a, as we just want them to stay the same even when the button is pressed in. You just have to set values for

The finished declaration looks like this.

.housebutton a:hover {

background-color: #99aabf;

border-top: 2px #31557f solid;

border-left: 2px #31557f solid;

border-bottom: 2px #cce3ff solid;

border-right: 2px #cce3ff solid;

}

And, basically, that is it. How did you go, did you get your buttons to behave properly? One of the tricks is to get those color differences right. Have fun with your new technique and enjoy your lightweight, fast downloading pages.

{list-style-image: url(../gifs/l1bullet.gif)}

Style Master CSS Editor

Web Directions Conference