g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

European Travel
Action Movies
Bible Basics
Romance Movies
Family Travel

All times in EST

Autism Spectrum Disorders: 4:00 PM

Full Schedule
g HTML Site

BellaOnline's HTML Editor


Designing Basic Buttons Without Images

Guest Author - Elizabeth Connick

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.
This site needs an editor - click to learn more!

Add Designing+Basic+Buttons+Without+Images to Twitter Add Designing+Basic+Buttons+Without+Images to Facebook Add Designing+Basic+Buttons+Without+Images to MySpace Add Designing+Basic+Buttons+Without+Images to Del.icio.us Digg Designing+Basic+Buttons+Without+Images Add Designing+Basic+Buttons+Without+Images to Yahoo My Web Add Designing+Basic+Buttons+Without+Images to Google Bookmarks Add Designing+Basic+Buttons+Without+Images to Stumbleupon Add Designing+Basic+Buttons+Without+Images to Reddit

Advanced CSS Buttons
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

For FREE email updates, subscribe to the HTML Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2014 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 BellaOnline Administration for details.


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor