Custom Buttons

Font and Background.

• You can change the font colour of the button by adding the style=" " attribute

  style="color:blue" to the input type tag.

  <form>
  <input type=button value="Font Colour" style="color:blue" onclick=location="yourpage.htm">
  </form>

• You can embolden the text by adding font-weight:bold to the style attribute.

  <form>
  <input type=button value="Font Colour" style="color:blue ; font-weight:bold" onclick=location="yourpage.htm">
  </form>

• You can change the text by adding font-family:Times New Roman to the style attribute.

  <form>
  <input type=button value="Font Colour" style="color:blue ; font-weight:bold; font-family:Times New Roman" onclick=location="yourpage.htm">
  </form>

• You can change the text size by adding font-size:10 to the style attribute.

  <form>
  <input type=button value="Font Colour" style="color:blue ; font-weight:bold; font-family:Times New Roman; font-size:10" onclick=location="yourpage.htm">
  </form>

• You can change the button size by adding the height and width attribute.

  <form>
  <input type="Button" value="FONT-SIZE:10px" style="color:blue; font-weight:bold; font-family:Times New Roman; font size:10;height:100;width:300" onclick=location="yourpage.htm">
  </form>

• You can change the button colour by adding background-color to the style attribute

  <form>
  <input type=button value="Font Colour" style="color:blue ; font-weight:bold ; background-color:red" onclick=location="yourpage.htm">
  </form>

• You can add a background image by adding background-image:url(image.gif) to the style attribute

  <form>
  <input type=button value="Font Colour" style="color:blue ; font-weight:bold ; background-image:url(lava.jpg)" onclick=location="yourpage.htm">
  </form>

  ---

  OnMouse Event Colour Effects

  This script allows for colours to be used as backgrounds in OnMouseOver, OnMouseOut, and OnClick events.
  

  Copy the following into the HEAD section.

  <script language="JavaScript">
  <!--
  /*
  rollover image buttons script credit: Website Abstraction (www.wsabstract.com) More free JavaScripts here.
  Note:Credit must stay intact for use.
  */
  function newcol(color){
  if (event.srcElement.tagName=="INPUT")
  event.srcElement.style.backgroundColor=color
  }
  //-->
  </script>
  

  The Buttons Code is to be place between FORM tags.
  The opening FORM tag contains the onmouse event instructions and these will be applied to all buttons that are between the form tags
  The following should then be placed where you want the buttons to be on your page, but with the number of buttons that you require between the form tags.

  <form onMouseover="newcol('lightgreen')" onMouseout="newcol('mediumseagreen')">

  <input type="button" value="Click Me!" style="font-weight:bold" onClick="window.open('yourpage.htm')">

  <input type="button" value="Click Me!" style="background-color:yellow; font-weight:bold" onClick="window.open('yourpage.htm')">
  

  <input type="text" value="Click Me!" size="10" style="background-color:mediumseagreen; font-weight:bold" onClick="window.open('yourpage.htm')">
  

  </form>

  ---

  OnMouse Event Graphic Effects

  This script allows for graphics to be used as backgrounds in OnMouseOver, OnMouseOut, and OnClick events.
  

  Copy the following into the HEAD section.

  <script language="JavaScript">
  <!--
  function newpic(image){
  if(event.srcElement.tagName=="INPUT")
  event.srcElement.style.backgroundImage="url"+"('"+image+"')"
  }
  //-->
  </script>
  

  The Buttons Code is to be place between FORM tags.
  The opening FORM tag contains the onmouse event instructions and these will be applied to all buttons that are between the form tags
  The following should then be placed where you want the buttons to be on your page, but with the number of buttons that you require between the form tags.

  <form onMouseover="newpic('images/bkgnd3.jpg')" onMouseout="newpic('images/lava.jpg')">

  <input type="button" value="Click Me!" style="background-image: url(image.jpg); color:blue; font-weight:bold"
  onclick="window.open('yourpage.htm')">
  

  <input type="button" value="Click Me!" style="background-color :#FF0000; color:blue; font-weight:bold" onClick=location="yourpage.htm">

  You can even use a text box

  <input type="text" size="10" value="Click Me!" style="background-color :#FF0000; color:blue; font-weight:bold" onClick="window.open('yourpage.htm')">
  

  </form>

  ---

  <INPUT type="button" value="Exit" onClick="window.close(-1)">

  <INPUT type="button" value="Button Name" onClick=location="yourpage.htm">

  <INPUT type="radio" >

  <INPUT type="checkbox">

  OnmouserOver, OnmouseDown, OnmouseUp, OnmouseOut

  <form name=magic>
  <INPUT TYPE=button name="but" value="Magic button mouse me and see"
  onmouseover="document.magic.but.style.backgroundColor='#00AA00',width='290',height='100';
  document.magic.but.value='You Can Change The text'"
  onmousedown="document.magic.but.style.backgroundColor='FFFF00';
  document.magic.but.value='As Easy As The Colour and Size'"
  onmouseup="document.magic.but.style.backgroundColor='#FF0000';
  document.magic.but.value='Just like this example'"
  onmouseout="document.magic.but.style.backgroundColor='#0000FF',height='24';
  document.magic.but.value='Coloured button Without Script'">
  </form>