Depressible DHTML buttons
Note: Questions regarding this script should be posted on the author's message board.
Description: Use this visual DHTML script to transform regular text/ image into depressible buttons! The effect can be applied to any "containment" tag, such as <span>, <div>, <td> etc. Easy to install and degrades well with all other browsers. Buttonize your page elements today!
Demo:
- Plain HTML table:
| Dynamic Drive | What's New | What's Hot | Forum |
- HTML table with images (Note how each image appears dull before the mouse is over it):
 Dynamic Drive
|
 What's New
|
What's Hot
|
Forum
|
Directions: 
Step 1: Insert the following code into the <head> section of your page:
Step 2: Download the below file, and upload it into your webpage directory. Be sure to change the src property in the code above to correctly point to where this file is on your server:
coolbuttons.js (download by clicking it, or clicking it with the shift key depressed in NS)
Step 3: Ok, you're now formally ready to buttonize any display element on your page! The recommended element to use is the TABLE, along with TABLE cells to render each individual button. Simply assign the table a class of "coolBar", and each cell, a class of "coolButton":
Example 1 (Using table):
<table
class="coolBar">
<tr>
<td class="coolButton">
<font face="Verdana" size="2"><b>Dynamic
Drive</b></font>
</td>
<td class="coolButton">
<font face="Verdana" size="2"><b>What's
New</b></font>
</td>
</tr>
</table>
| Dynamic Drive | What's New |
Example 2 (using div and span, with URL enabled):
<div class="coolBar"
style="width:100px">
<span class="coolButton" style="width:100px"
onClick="window.location='http://dynamicdrive.com'"><img
src="home.gif"> <b>Back Home</b></span>
</div>
Back Home
Note that when used with <span>, the width attribute MUST be defined, like above. To make the button clickable, we use the onClick event handler inside the button. Alternately, could also use the <a> tag directly inside the HTML for each button, in which the resulting link is clickable in all browsers (and not just IE 4+).