We've all seen these buttons on web pages throughout the web. They are a very useful and versatile navigation element. They are also a frequent topic of the many help requests that I receive. This page should answer most of your questions about the javascript button.

 

Basic Button Link:

<FORM>
<INPUT TYPE="button" VALUE="Click Here" onClick="parent.location='url_of_page_here'">
</FORM>

 

Button Link Open New Browser Window:

<FORM>
<INPUT TYPE="button" VALUE="Click Here" onclick="window.open('url_of_page_here')">
</FORM>

 

Button Link Open Full Screen Window:

<script>
<!--
function fullwin(){
window.open("url_of_page_here","","fullscreen,scrollbars")
}
//-->
</script>
<FORM>
<INPUT TYPE="button" VALUE="Click Here" onClick="fullwin()">
</FORM>

 

Email Link Button:

<FORM>
<INPUT TYPE="button" VALUE="Click Here" onClick="parent.location='mailto:your_email@address.com'">
</FORM>

 

Replace Frameset Button: Works like the target="_top" command.

<FORM>
<INPUT TYPE="button" VALUE="Click Here" onClick="top.location.href = 'url_of_page_here'">
</FORM>

 

Target Frame Button: Works like the target="FrameName" command. You will replace the word FrameName with the actual name given to the frame that you are wanting to target.

<FORM>
<INPUT TYPE="button" VALUE="Click Here" onClick="parent.FrameName.location.href= 'somepage.html'">
</FORM>

 

Back and Forward Buttons: Work like the browser buttons.

<FORM>
<INPUT TYPE="button" VALUE="BACK" onClick="history.go(-1)">
&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="button" VALUE="FORWARD" onCLick="history.go(1)">
</FORM>

Style Buttons

The button style element will work with IE browsers version 4 and later. Most other browsers will simply display the default gray button (like at the top of this page).

Some Examples:

                  

 

The Style Command:

style="background-color: #000000; color: #FFFFFF; border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0; border-top: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0"

In the style command above:
#000000 Sets the background color.
#FFFFFF Sets the text color.
#C0C0C0 Sets the border colors.

Here's an example of the style command inserted into a Basic Button Link.

<FORM>
<INPUT TYPE="button" VALUE="Click Here" onClick="parent.location='url_of_page_here'" style="background-color: #000000; color: #FFFFFF; border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0; border-top: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0">
</FORM>