CSS Tip-Colored Buttons

Cool Tips & Tricks	Help Communities:

<< Prev Topic | Next Topic >>

Cool Tips & Tricks ::: CSS FAQ ::: CSS Tip-Colored Buttons

Topic: CSS Tip-Colored Buttons

(?)

QuantumTorpedo

Registered User
Posts: 36

Posted: 8/23/03 4:13 pm
CSS Tip-Colored Buttons

General

Here's a cool CSS trick that I used in the links table in the top of the forum. This code turns your link into a button that depresses when you click it. The code actually uses a table and utilizes borders to make the buttons look like buttons. Then, the code splits the link into the a:link, a:visited, a:active, and a:hover parts so that you can create a different link color for the buttons than the rest of your site.

Standard buttons housed within forms are generally not as customizable as this button and standard ones are generally associated with form submittal or script activation. Buttons used for other purposes require images and with too many images can reduce page loading time. Also, you can make additional code with the a:hover portion of the CSS script to change the link text as your mouse hovers over it just like any other link.

Installation

First, add this stylesheet to the head of your document:



<style type="text/CSS">

.mybutton a:link, .mybutton a:visited, .mybutton a:active {color: #000000; border-style: outset; border-color: #0000FF; border-width: 2px; width: 100%; height: 100%; background-color: #0000CC;}

.mybutton a:active {border-style: inset;}

</style>

Change the properties any way you like. Then, place your links inside tables and add a style="mybutton" tag to them, for example:

<table>
<tr>
<td class="mybutton">
<a href="URL1">My Button 1</a>
</td>
<td class="mybutton">
<a href="URL2">My Button 2</a>
</td>
<td class="mybutton">
<a href="URL3">My Button 3</a>
</td>
</tr>
</table>

Replace the URL and link name to whatever you want, and change the number of table datas and rows as you need.

The button will depress when you click on it, which adds a neat little effect when you use it in your navigation or sidebar area.

Updates:

August 14, 2003: Code shortened
August 10, 2003: Code created by QuantumTorpedo

Edited by: atlass at: 8/26/03 12:19 pm

Adulterated Jedi

Registered User
ezSupporter
Posts: 2555

Posted: 8/23/03 5:58 pm
Re: CSS Tip-Colored Buttons

Nice tut Q-T although i have a couple of improvements

Instead of giving each TD the class of mybutton, why dont you give the table the class, each TD (and links within them) will enherit that class anyways. It may only shave a nanosecond off the loading time ... but speed is everything

You should consider using lists and pure CSS for link buttons such as this. Not only will you be future proofing yourself with XHTML, its also a better way to do things, In my opinion. Soon (well probably not) ezboard will be porting over to XHTML for message boards, and hopefully table less layouts aswell .. so this will prepare you for when that happens

QuantumTorpedo

Registered User
Posts: 37

Posted: 8/24/03 8:15 am
Re: CSS Tip-Colored Buttons

"Instead of giving each TD the class of mybutton, why dont you give the table the class, each TD (and links within them) will enherit that class anyways. It may only shave a nanosecond off the loading time ... but speed is everything"--A J

Good point, and for most situations this would probably be better. However, if you wanted to apply perhaps different colors onto certain buttons then giving each td the class would make it easier to transfer certain buttons with a new class with different color properties.

Then again, I'm pretty new at web design myself (so I should be using your methods anyway), but when I discovered this code through trying to improve certain elements of my board, I thought that the effect was pretty cool

::: Topic Commands

<< Prev Topic | Next Topic >>

Icon Legend

:::Reply to Post Button

:::Edit Post Button

:::Delete Post Button (Moderator Only)

:::Subscribe to Thread Button

:::Email to Friend Button

- Cool Tips & Tricks - CSS FAQ -

ezboard Help Communities:

Help Forums Bug Base