BUTTONS

There are several methods for putting buttons on your pages that do several different things. Click on any link or button below. This will take you to the details on how to make the particular button.

  • Make your own buttons using Cascading Style Sheet (CSS)and any background & text colors.

  • Using A Graphic For A Link, e.g.

  • Using A Form Button For A Link, etc., e.g.

  • Using A Form Button To Open A New Page, e.g.

Details for each type of button is given below.

Make Your Own Buttons!

  Learn About Files!

Use this code in the <HEAD> of your web page:

<style type="text/css">
.tile {
	border-right: #000000 2px outset; padding-right: 2px;
	border-bottom: #000000 2px outset; padding-bottom: 2px; 
	border-top: #ffffff 2px outset; padding-top: 2px;   
	border-left: #ffffff 2px outset; padding-left: 2px; 
	background-color: #ff9900; 
	text-align: left; color:#ffffcc;
	text-family: verdana,arial; font-size: 8pt;
}
</style>

Then use this code in the <BODY> where you want the button to appear.

<div class=tile style="width:25%;">
<a href="filename" style="text-decoration:none">
<b><font color="#ffff00">description on button</font></b></a>
</div>

You can override or add any of the attributes in the style by including the attribute in the DIV, e.g.

<DIV class=button style="text-decoration:none; background-color: #ffff00; >

i.e. the background color has been changed to #ffff00, yellow, instead of the original orange!

Using A Graphic For A Link.

<- click on the graphic link to go to a new page. Then use the back button to return here.

This is the simplest type of link other than using text for the link. In this method use:

<a href="URL"><img src="filename"></a>

where:

  • URL = the web address, e.g. http://www.someplace.com.
  • filename = the name of the graphics, e.g. link.gif

Using A Form Button As A Link.

This type of link requires a bit more work but can be very nice if used sparingly on your pages.

<form><INPUT TYPE="button" VALUE="YOUR TEXT HERE" onClick="parent.location='THE URL HERE'"></form>

You just replace YOUR TEXT HERE with what every you want to say on the button, e.g, GO TO MY NEXT PAGE. Replace THE URL HERE with the web location you want to go to, e.g. http://www.someplace.com or, if the link is to a page in your file manager, mynextpage.html.

SPECIAL NOTE - NEW BUTTON TAG

There is a new HTML TAG that can make a button. It is <BUTTON>. This BUTTON tag works only on the IE5.5 and above or Netscape 6.0 and above. You can use it in the following ways:

  • TEXT BUTTON -> <BUTTON>SUBMIT<BUTTON> ->  

  • TEXT BUTTON USING <FONT> -> <BUTTON><b><font size=5 face="times new roman" color="#CC0000">SUBMIT</font></b><BUTTON> ->  

  • IMAGE BUTTON -> <BUTTON><img src="smallfile.gif"><BUTTON> ->  

Using A Form Button To Opening A New Window.

The code for a form button to open a new window is:

<form> <input type="button" Value="YOUR TEXT HERE" ONCLICK="window.open('THE URL HERE', 'Sample', 'toolbar=yes,location=yes,directories=no,status=no,menubar=yes, scrollbars=yes,resizable=yes,copyhistory=yes,width=500,height=260')"> </FORM>

If you use this code, only change the BOLD portions.