Home arrow HTML arrow 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 / 51
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
(Page 1 of 4 )


In this article, I talk about the look of your button. I explain how you can give your button a different look (from the default). To understand this article, you should have basic knowledge of HTML, Cascading Style Sheets and JavaScript. You should also have basic knowledge of the composition of colors and how to present colors using HTML.

If you do not understand this second requirement, then see one of my previous articles. In that article, I explain in simple terms, the composition of colors and how they are presented in HTML. To understand that article, all you need is basic knowledge in HTML and CSS.

The Presentation of a Button

A button has two main states. In either state, it has a three-dimensional look. When a button is not pressed, it swells outwards (towards the user). When a button is pressed it goes inwards (into the computer screen).

Have you ever wondered how this is done? When a button is not pressed, its left and top edges (borders) take a lighter color as compared to the main color of the button, while its right and bottom edges take a darker color as compared to the main color of the button. When a button is pressed, the reverse is true; that is, the left and top edges take a darker color as compared to that of the main color, while the right and bottom edges take a lighter color as compared to that of the main color of the button.

Even though the colors of the edges are different, in order to match the main color, they should be similar to the main color. And this description is the secret for the presentation of a button.

Presentation Principles of a Button

A block element such as the DIV element or Button element has a line break in front of and after it. Any block element has a box-oriented formatting model as follows (Fig.1):

The content area refers to the effective content of the element. The padding area refers to the area between the element's content and the border. The padding, border and margin are areas that normally surround the element's content. The padding area uses the same background as the element itself. The margin is transparent, that is, through it you can see the parent element.

These extra areas occupy space on your web page. The amount of space they occupy depends on the browser. So you can remove them or give them particular dimensions using CSS. You can give any color you want to the border.

Button Creation

You can use the Input element or the Button element to create a button. The HTML specification encourages us to use the Button element instead of the Input element whenever we have the choice. The rest of this article will make use of the Button element.

Many browsers (especially Microsoft Internet Explorer) render buttons as follows: a padding area exists but has zero (or little) width. The border is what you see as the edges (mentioned above). The margin area exists but has zero (or little) width. The browser I am using gives a default padding area of zero width and a default margin area of zero width.

There is no need for us to change this convention. If we do that, the nature of our custom button will not fit with browser philosophy. The easiest way for us to obtain a custom button will be to modify the looks of the default button.

The button element can take in content. That is, it can take a background picture and/or a background color; it can take color (foreground color) for its text; it can take a line break element; it can take the bold element; it can even take a table element.

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-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials