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
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance


dailyclick
All times in EST

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

Advanced CSS Buttons

Guest Author - Elizabeth Connick

In a previous article I discussed the basics of designing navigation buttons without using images – buttons that are purely CSS- and HTML-driven. Now it's time to look at some ways to fancy up those buttons.

First, how about a three-dimensional look? It's surprisingly easy to add. Just set the button div's borders so that the top and left borders are lighter than the background color, and the bottom and right border are darker. The code will look something like this…

.button {
Background-color: #FF0000;
Color: #FFFFFF;
Text-align: center;
Border: 2px solid;
Border-color: #FF9966 #993333 #993333 #FF9966;
}

… and your button now looks like this:

TEXT


Next, let's move on to some dynamic effects. Thanks to the CSS :hover pseudoclass we can incorporate a rollover effect that will generate the appearance of the button pressing down when your visitors roll the mouse pointer over it. First, we'll need to switch techniques slightly by using a link tag instead of a div to hold the button. Your code will now look like this:

<a href="#" class="button">TEXT</a>

Now switch your CSS rules to this…

.button {
Background-color: #FF0000;
Color: #FFFFFF;
Text-align: center;
Padding: 2px;
Border: 2px solid;
Border-color: #FF9966 #993333 #993333 #FF9966;
Text-decoration: none;
Display: block;
}

a:hover.button {
Border-color: #993333 #FF9966 #FF9966 #993333;
Background-color: #CC3333;
}

You'll notice a few minor changes to the .button class definition that smooth the transition to a link tag. The padding puts some space around your button's text, and setting text-decoration to "none" stops your browser from underlining it. Finally, setting display to "block" causes the browser to treat it as a structural object rather than a text object. This keeps your borders from being lost if you use small text in the button.

The information in the a:hover rule does two things. First, it switches the border colors around so that the top and left borders are now darker while the bottom and right borders are lighter. Second, it darkens the button's background color to enhance the illusion. As a rule, darker objects look farther away than lighter ones – it's a common optical illusion that we can put to good use through this technique!
This site needs an editor - click to learn more!

Add Advanced+CSS+Buttons to Twitter Add Advanced+CSS+Buttons to Facebook Add Advanced+CSS+Buttons to MySpace Add Advanced+CSS+Buttons to Del.icio.us Digg Advanced+CSS+Buttons Add Advanced+CSS+Buttons to Yahoo My Web Add Advanced+CSS+Buttons to Google Bookmarks Add Advanced+CSS+Buttons to Stumbleupon Add Advanced+CSS+Buttons to Reddit




Designing Basic 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 © 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


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


BellaOnline Editor