New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
IE5+

Depressible DHTML buttons

Author: Erik Arvidsson | Homepage

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: Developer's View

Step 1: Insert the following code into the <head> section of your page:

Select All

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+).