logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Low Carb: 8:00 PM

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

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:

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!

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
RSS
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


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 BellaOnline Administration for details.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor