Home arrow HTML arrow Page 3 - Custom Buttons in HTML
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 / 31
May 07, 2008
TABLE OF CONTENTS:
  1. · Custom Buttons in HTML
  2. · Colored Button
  3. · Colored Button continued
  4. · Button with Background Image

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
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> &nbsp

<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.


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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