Custom Form Buttons

These 3 examples apply different style rules for the relevant mouse event.

To use the buttons to load another page add onclick="location='yourpage.htm'" to the input tag 

<script type="text/javascript">

LastID = "" 
function mOver(id,clas){ 
(LastID != id?document.getElementById(id).className = clas:"") 
} 

function mOut(id,clas){ 
(LastID != id?document.getElementById(id).className = clas:"") 
} 

function active(id,clas){ 
document.getElementById(id).className = clas
if (LastID != id){ 
(LastID != ""?document.getElementById(LastID).className = "default1":"") 
} 
LastID = id 
} 

</script>

<style>
.default1{
width:70px;
text-align:center;
font-size:14px;
color:#000000;
vertical-align:center;
border-top:2px outset #eeeeee;
border-left:2px outset #bbbbbb;
border-right:2px outset #dddddd;
border-bottom:2px outset #cccccc;
background:#b0bbce
} 

.down1{
width:70px;
text-align:center;
font-size:10px;
vertical-align:center;
color:#000000;
border-top:2px inset #dce1e9;
border-left:2px inset #dce1e9;
border-right:2px inset #dce1e9;
border-bottom:2px inset #dce1e9;
background:#718099
} 

</style>
<form>

<input type="button" value="button 1" id="button1" class="default1" onmousedown="active(this.id,'down1')">

<input type="button" value="button 2" id="button2" class="default1" onmousedown="active(this.id,'down1')">

<input type="button" value="button 3" id="button3" class="default1" onmousedown="active(this.id,'down1')">

<input type="button" value="button 4" id="button4" class="default1" onmousedown="active(this.id,'down1')">

</form>

The script is the same for the following buttons but there are slight differences in the style rules and to the mouse events attached to the buttons. 

<script type="text/javascript">

LastID = "" 
function mOver(id,clas){ 
(LastID != id?document.getElementById(id).className = clas:"") 
} 

function mOut(id,clas){ 
(LastID != id?document.getElementById(id).className = clas:"") 
} 

function active(id,clas){ 
document.getElementById(id).className = clas
if (LastID != id){ 
(LastID != ""?document.getElementById(LastID).className = "default2":"") 
} 
LastID = id 
} 

</script>

<style>
.default2{
width:70px;
height:20px;
text-align:center;
font-size:10px;
color:#ffffff;
vertical-align:center;
border-top:2px outset #eeeeee;
border-left:2px outset #bbbbbb;
border-right:2px outset #dddddd;
border-bottom:2px outset #cccccc;
background:#b0bbce
}

.over2{
width:70px;
height:20px;
text-align:center;
font-size:10px;
vertical-align:center;
color:#93a2bb;
border-top:2px solid #93a2bb;
border-left:2px solid #93a2bb;
border-right:2px solid #93a2bb;
border-bottom:2px solid #93a2bb;
background:#b0bbce
}

.down2{
width:70px;
height:20px;
text-align:center;
font-size:9px;
vertical-align:center;
color:#b0bbce;
border-top:2px inset #dce1e9;
border-left:2px inset #dce1e9;
border-right:2px inset #dce1e9;
border-bottom:2px inset #dce1e9;
background:#718099
}
</style>

<form>

<input type="button" value="button 1" id="button1" class="default2" onmouseover="mOver(this.id,'over2')" onmouseout="mOut(this.id,'default2')" onmousedown="active(this.id,'down2')">

<input type="button" value="button 4" id="button2" class="default2" onmouseover="mOver(this.id,'over2')" onmouseout="mOut(this.id,'default2')" onmousedown="active(this.id,'down2')">

<input type="button" value="button 4" id="button3" class="default2" onmouseover="mOver(this.id,'over2')" onmouseout="mOut(this.id,'default2')" onmousedown="active(this.id,'down2')">

<input type="button" value="button 4" id="button4" class="default2" onmouseover="mOver(this.id,'over2')" onmouseout="mOut(this.id,'default2')" onmousedown="active(this.id,'down2')">

</form>

A further enhancement of the script allows each button effect to change independently. 

<script language="JavaScript"> 

myArray=new Array()
myArray[0]=new Array("default3a","over3a","down3a")
myArray[1]=new Array("default3b","over3b","down3b")
myArray[2]=new Array("default3c","over3c","down3c")
myArray[3]=new Array("default3d","over3d","down3d")

LastID = ""
lastClas=""
function mOver(id,clas){ 
(LastID != id?document.getElementById(id).className = myArray[clas][1]:"") 
} 

function mOut(id,clas){ 
(LastID != id?document.getElementById(id).className = myArray[clas][0]:"") 
} 

function active(id,clas){ 
document.getElementById(id).className = myArray[clas][2]
if (LastID != id){ 
(LastID != ""?document.getElementById(LastID).className = myArray[lastClas][0]:"")

} 
LastID = id 
lastClas=clas
} 

</script> 

<style> 
.default3a{
width:70px;
text-align:center;
font-size:14px;
color:#000000;
border-top:2px outset #eeeeee;
border-left:2px outset #bbbbbb;
border-right:2px outset #dddddd;
border-bottom:2px outset #cccccc;
background-color:#44aa44
}

.over3a{
width:70px;
text-align:center;
font-size:14px;
color:#93a2bb;
background-color:#aaddaa
}

.down3a{
width:70px;
text-align:center;
font-size:12px;
color:#000000;
border-top:2px inset #dce1e9;
border-left:2px inset #dce1e9;
border-right:2px inset #dce1e9;
border-bottom:2px inset #dce1e9;
background-color:#77aa77
}

.default3b{
width:70px;
text-align:center;
font-size:14px;
color:#000000;
border-top:2px outset #eeeeee;
border-left:2px outset #bbbbbb;
border-right:2px outset #dddddd;
border-bottom:2px outset #cccccc;
background-color:#aaaa44
}

.over3b{
width:70px;
text-align:center;
font-size:14px;
color:#93a2bb;
background-color:#dddda
}

.down3b{
width:70px;
text-align:center;
font-size:12px;
color:#000000;
border-top:2px inset #dce1e9;
border-left:2px inset #dce1e9;
border-right:2px inset #dce1e9;
border-bottom:2px inset #dce1e9;
background-color:#aaaa77
}

.default3c{
width:70px;
text-align:center;
font-size:14px;
color:#000000;
border-top:2px outset #eeeeee;
border-left:2px outset #bbbbbb;
border-right:2px outset #dddddd;
border-bottom:2px outset #cccccc;
background-color:#aa4444
}

.over3c{
width:70px;
ext-align:center;
font-size:14px;
color:#93a2bb;
background-color:#ddaaaa
}

.down3c{
width:70px;
text-align:center;
font-size:12px;
color:#000000;
border-top:2px inset #dce1e9;
border-left:2px inset #dce1e9;
border-right:2px inset #dce1e9;
border-bottom:2px inset #dce1e9;
background-color:#aa7777
} 

.default3d{
width:70px;
text-align:center;
font-size:14px;
color:#000000;
border-top:2px outset #eeeeee;
border-left:2px outset #bbbbbb;
border-right:2px outset #dddddd;
border-bottom:2px outset #cccccc;
background-color:#4444aa
}

.over3d{
width:70px;
text-align:center;
font-size:14px;
color:#93a2bb;
background-color:#aaaadd
}

.down3d{
width:70px;
text-align:center;
font-size:12px;
color:#000000;
border-top:2px inset #dce1e9;
border-left:2px inset #dce1e9;
border-right:2px inset #dce1e9;
 border-bottom:2px inset #dce1e9;
background-color:#7777aa
} 
</style>
<form>
<input type="button" value="button 1" id="button1" class="default3a" onmouseover="mOver(this.id,0)" onmouseout="mOut(this.id,0)" onmousedown="active(this.id,0)">

<input type="button" value="button 4" id="button2" class="default3b" onmouseover="mOver(this.id,1)" onmouseout="mOut(this.id,1)" onmousedown="active(this.id,1)">

<input type="button" value="button 4" id="button3" class="default3c" onmouseover="mOver(this.id,2)" onmouseout="mOut(this.id,2)" onmousedown="active(this.id,2)">

<input type="button" value="button 4" id="button4" class="default3d" onmouseover="mOver(this.id,3)" onmouseout="mOut(this.id,3)" onmousedown="active(this.id,3)">
</form>