The default buttons produced by the tag <input type="button" value="Function-Mane"> or <button type="button">Function-Name</Button> are gray in color. The gray button color suits many backgrounds, just as the white shirt suits many colors of trousers. There are times when you need a different color shirt for a particular color of trousers. In a similar way there are times when you would need a button of a different color for your particular web page background.
Custom Buttons in HTML - Colored Button (Page 2 of 4 )
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:
The Pressed State
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.