Home arrow HTML arrow Page 2 - Custom Buttons in HTML

Custom Buttons in HTML

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.

Author Info:
By: Chrysanthus Forcha
Rating: 4 stars4 stars4 stars4 stars4 stars / 50
May 07, 2008
  1. · Custom Buttons in HTML
  2. · Colored Button
  3. · Colored Button continued
  4. · Button with Background Image

print this article

Custom Buttons in HTML - Colored Button
(Page 2 of 4 )

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);








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 buttons 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().

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials