The <button> Tag

Unlike the Form <input type="button"> tag, the <button> tag does not need the opening and closing <form> tags.

The syntax of the Button tag is:

The example above creates a button showing your text, but is non functional.
The rest of the example buttons work.

In order to get the button to work you have to include an OnMouse Event in the opening <button> tag.

• To load a new page use one of the following:

<button onClick="window.location='page.htm'">Location One</button>

<button onClick="window.open('page.htm')">Location Two</button>

• A Close Button:

<button onClick="window.close()">Close</button>

Images & Text.

With Form Buttons, in order to change the text, background, or size etc, you have to use CSS Style attributes.
You can use most HTML tags between the <button> & </button> tag.

• Font Size

<button><font size="6">Your Text Here</font></button>

• Font Colour

<button><font color="FF0000">Your Text Here</font></button>

• Image

And/or Text

<button><img src="yourimage.gif" width=50 height=50><BR><b><i>And/or Text</i></b></button>

• Table

<button>
<table border="1" width="100%">
<tr>
<td>Some Text</td>
<td>Some more Text</td>
</tr>
</table>
</button>

You can even add colour to the table

<button>
<table border="4" bordercolor=red width="100%">
<tr>
<td bgcolor=cyan>Some Text</td>
<td bgcolor=gold>Some more Text</td>
</tr>
</table>
</button>

The following button contains;

1. A Table with flashing border
2. Flashing text in a table cell
3. An animated gif

Nearly There

<button onClick="window.open('yourpage.htm','','width=300,height=100,left=300,top=100')">
<table border="3" width="100%" id="tborder" style="border:4px dashed #ff0000">
<tr>
<td bgcolor=black><img src="ucon9.gif"></td>
<td bordercolor=black align=center><p id="text" style="color:c0c0c0"><b>WHAT!</b></td>
</tr>
</table>
</button>

Note:
id="tborder" style="border:4px dashed #ff0000" and <p id="text" style="color:c0c0c0">
are for the script that runs the flashing effects.
This script can be found in my Webplus section under Scripts.

For non <button> supporting browsers you could include a standard link within the <button> tags.

<button onClick="window.open('../popup/note3.htm','','width=300,height=100,left=300,top=100')"> <a href="window.open('page.htm','','width=300,height=100,left=300,top=100')">Location</a> </button>