<STYLE>
.start {color:yellow; background:navy}
.end {color:blue; background:plum}
</STYLE>
<SCRIPT LANGUAGE="javascript">
function highlightButton(s) {
if ("INPUT"==event.srcElement.tagName)
event.srcElement.className=s
}
</SCRIPT>
FORM commands create the button process.
<FORM NAME=highlight
onMouseover="highlightButton('start')"
onMouseout="highlightButton('end')">
<INPUT TYPE="button"
VALUE="Click me to go home to www.htmlgoodies.com"
onClick="location.href='http://www.htmlgoodies.com'">
</FORM>
NAME=highlight connects this button to the JavaScript above. Look again at the script. You'll see the word "highlight" in there, too. INPUT TYPE="button" is basic HTML to create a button. VALUE="--" puts the text on the button. onClick= is JavaScript to alert the browser to do something when the button is clicked. In this case I have it set to send the browser to the location.href of HTML Goodies. See that above? You can change out where this button points to by simply changing out the URL to Goodies with your own.
There are limitations to the <BUTTON> command. Apart from the obvious such as frames and embedded objects, you cannot include the following elements inside a <BUTTON>:
Another <BUTTON> tag
<SELECT> tag
<INPUT> tag
<A> tag - Notice the way round this restriction, on my first button.
You can add colour to the button and the text on the button with Cascading Style Sheets. This time I try some more ideas, without the help of Java Script.
<BUTTON STYLE="color:yellow; background-color: green; background-image : url(grass.gif);">KEEP OFF THE GRASS!</BUTTON>
Now we have coloured text:
<BUTTON><FONT COLOR="008000"><B>Save the<BR> environment!</B></FONT></BUTTON>
How about an image? Yes, an image inside a button!
<BUTTON><IMG SRC="image.gif"></BUTTON>
Now we have a table, and image and some Arial text!:
<BUTTON>
<TABLE BORDER="1">
<TR>
<TD><IMG SRC="image.gif"></TD>
</TR><TR>
<TD><FONT FACE="Arial">Eat your green vegetables!</FONT></TD>
</TR>
</TABLE>
</BUTTON>