Custom Buttons in HTML - Colored Button continued
(Page 3 of 4 )
You would normally have more than one button where you want these same effects. The following code shows the complete code for two buttons, having the above effects:
<html>
<head>
<style type="text/CSS">
button {background-color:rgb(186,85,211);
border-style:solid;
border-left-color:rgb(238,130,238);
border-top-color:rgb(238,130,238);
border-right-color:rgb(128,0,128);
border-bottom-color:rgb(128,0,128);
color:rgb(250,250,226)
}
</style>
<script type="text/JavaScript">
function showPressed(ID)
{
document.getElementById(ID).style.borderLeftColor = "rgb(128,0,128)";
document.getElementById(ID).style.borderTopColor = "rgb(128,0,128)";
document.getElementById(ID).style.borderRightColor = "rgb(238,130,238)";
document.getElementById(ID).style.borderBottomColor = "rgb(238,130,238)";
}
function unPressed(ID)
{
document.getElementById(ID).style.borderLeftColor = "rgb(238,130,238)";
document.getElementById(ID).style.borderTopColor = "rgb(238,130,238)";
document.getElementById(ID).style.borderRightColor = "rgb(128,0,128)";
document.getElementById(ID).style.borderBottomColor = "rgb(128,0,128)";
}
</script>
</head>
<body>
<button type="button" id="B1" onmousedown="showPressed('B1')" onmouseup="unPressed('B1')"><b>Click Me</b></Button>  
<button type="button" id="B2" onmousedown="showPressed('B2')" onmouseup="unPressed('B2')"><b>Also Me</b></button>
</body>
</html>
When an event is triggered, a function is called with the ID of the button, passed as an argument. The JavaScript functions take the ID as an argument.
Next: Button with Background Image >>
More HTML Articles
More By Chrysanthus Forcha
/ 13 
