g
Printer Friendly Version

editor  
BellaOnline's HTML Editor
 

Designing Basic Buttons Without Images

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:

TEXT


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:

TEXT


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:

TEXT


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

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 © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor