Magic buttons!

Make your <a/> tags look like buttons!

Quick examples:

My Button 'Nother Button Style First style, again.

What does it do?

Convert this HTML:

<a href="#" class="makeButton">Another</a>

into this:

<div class="buttonWrap">
    <a href="#" class="button">
       <span>Another</span>
    </a>
</div>

How do I do it?

Magic! Nah just kidding. Just CSS and javascript.

First, include the required javascript files:

• prototype-1.5.0.js
• event-selectors.js
• ButtonMarkup.js

Next, add styles to display your buttons:

.makeButton {
	color:#666;
}
.makeButton:hover {
	color:#333;
}
.buttonWrap {
	height: 25px;
	display: block;
	float: none;
}
a.button {
	clear:left;
	float:left;
	background:url("buttonLeft.gif") no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
}
a.button span {
	float:left;
	display:block;
	background:url("buttonRight.gif") no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
a.button span {float:none;}
a.button:hover span {
	color:#333;
}
a.button:hover {
	background-position:0% -42px;
}
a.button:hover span {
	background-position:100% -42px;
}
			

Now, add a javascript rule, and a onLoad function (if you are already using an onLoad, just add the line in to yours):

var Rules = {
	'a.makeButton': function(element) {
		new ButtonMarkup.anchor (element);
	}
}
window.onload = function () {
	//Load Rules
	EventSelectors.start(Rules);
}