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