Custom Buttons in HTML

Colored Button

Let us create a color button whose (main) color is MediumOrchid represented by rgb(186,85,211) in CSS. The dark borders will be purple represented by rgb(128,0,128) in CSS. The light borders will be violet represented by rgb(238,130,238) in CSS. The color (foreground color) of the button's text will be LightGoldenRodYellow represented by rgb(250,250,226) in CSS. The text of the button will be bolded.

To make sure the borders appear whether or not the button is pressed, we give the border-style the value of solid. The background color is MediumOrchid; this is the color you see for the button.

The Un-Pressed State

In this state, which is the normal state of a button, the left and top borders have the violet color, and the right and bottom borders have the purple color. So the syntax for the button element in the CSS is:

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)

}

The Pressed State

In this state, the left and top borders have the purple color, and the right and bottom borders have the violet color. We shall use JavaScript to change the properties of the border. There are some events we have to take into consideration here.

The onmousedown event

The onmousedown event occurs when the pointing device button is pressed over an element.

The onmouseup event

The onmouseup event occurs when the pointing device button is released over an element.

So when the onmousedown event is triggered the following JavaScript function is called:

function showPressed()

{

document.getElementById("B1").style.borderLeftColor = "rgb(128,0,128)";

document.getElementById("B1").style.borderTopColor = "rgb(128,0,128)";

document.getElementById("B1").style.borderRightColor = "rgb(238,130,238)";

document.getElementById("B1").style.borderBottomColor = "rgb(238,130,238)";

}

This function is called showPress(). It changes the border colors so that the button will appear to be pressed. For this function the button ID is “B1.”

When the onmouseup event is triggered the following JavaScript function, which brings back the button’s original appearance, is called:

function unPressed()

{

document.getElementById("B1").style.borderLeftColor = "rgb(238,130,238)";

document.getElementById("B1").style.borderTopColor = "rgb(238,130,238)";

document.getElementById("B1").style.borderRightColor = "rgb(128,0,128)";

document.getElementById("B1").style.borderBottomColor = "rgb(128,0,128)";

}

The name of the function is unPressed().