Most websites use images for their navigation buttons. They're a great choice for a company with a web designer and a fully loaded graphics editing program. For the artistically challenged web developer using bargain-rate graphics software, though, really high-quality button images are usually out of reach.

Fortunately, you can develop nice-looking buttons for your site's menus without using images at all – thanks to CSS. Not only are CSS-designed buttons much easier for non-artists to create, they are also a lot easier to maintain. If you develop an image button and then later want to change its size, color or text, you'll have to do quite a bit of tweaking in that graphics editing program. With CSS all of these attributes are quick and easy changes.

Before we begin, there are two main drawbacks to using CSS rather than images for button design:

1. CSS can do quite a lot but there are some very fancy graphical effects that are difficult or impossible to replicate. If you want really fancy buttons, you may end up with a compromise; use CSS to design the button's framework, and then plug in a background image to fill in the effects. This setup will be somewhat easier to maintain than a pure image – text changes will be a piece of cake, for example – but you will need to hit the graphics program if you want to change other parameters, like color.

2. Using CSS and text for buttons means you're limited to the same basic fonts you use in the rest of your website. Most of your visitor's computers will not have fancier fonts installed, so they won't be able to see them. If you need an unusual font in those buttons, images are the way to go.

If you're using CSS to build a button we'll need to start with the framework – the div. A div has a lot of design options so we'll be able to tweak it until it looks just right. We'll begin by creating a class called "button" for our button divs. Let's say we want to have a red background and white text for our buttons…

.button {
background-color: #FF0000;
color: #FFFFFF;
width: 50px;
}

Now you can place a button on your website by calling the "button" class like this…

<div class="button">TEXT</div>

…which will look like this:



Not exactly ideal, is it? Let's add a rule to center the text within the button…

.button {
background-color: #FF0000;
color: #FFFFFF;
text-align: center;
width: 50px;
}

Now it looks like this:



Depending on what browser you're using, you might be seeing the button in the center of the screen instead of to the left. That's because some browsers erroneously treat "text-align" as a centering rule for the whole object, not just the text. You can avoid this issue by nesting your button or buttons inside a fixed width div to keep them in place.

Finally, let's add a border around the button in a darker red to give it a little more visual appeal…

.button {
background-color: #FF0000;
color: #FFFFFF;
text-align: center;
width: 50px;
border: 1px solid #993333;
}

…which gives us this:



Not bad! The link below will take you to some more advanced design techniques.