Applying a background to the button

To finalize the distinction between a regular form button and the HTML 4.0 button, we must force the new button to get rid of its ugly gray background. This can be accomplished with the little touch of CSS (Cascading style sheets), such as the following rules:

• background-color:whatever_color;

• background-image:url(whatever_image);

• font: bold 12px Arial;

Lets begin the transformation, shall we?

Save our planet!

<button style="background-color:lightgreen">Save our planet!</button>

Under the Sea

<button style="background-image:url(b6.gif)"><b>Under the Sea</b></button>

The background of the button can even be transparent, by specifying the background color in the style declaration to "transparent":

Transparent background!

<button style="background-color:transparent">Transparent background!</button>

Controlling the width/height of the button

By default, the dimensions of the button is automatically set to the dimensions required to accommodate the content inside, such as an image. There will often be times when you want to manually control this dimension to fit your design. By using another CSS declaration, you can. To control the width/height of the button, use the following style declaration:

• style="width:whatever_width;height:whatever_height"

Lets create a series of perfectly rectangular buttons, then, using the above knowledge:

H i !

<button style="width:100;height:100">H</button>
<button style="width:100;height:100">i</button>
<button style="width:100;height:100">!</button>

Example- Simulating browser buttons using the <button> tag:

Look closely at the above rectangular buttons...what do they remind you of? Well, they remind me of the default buttons that appear on the toolbar of your browser. Both of them are rectangular, and gray in color. In this fun example, we will create html 4.0 buttons that simulate the default browser buttons.

Back Forward Home Reload Close

<button style="width:65;height:65" onClick="history.go(-1)"><b>Back</b></button>

<button style="width:65;height:65" onClick="history.go(1)"><b>Forward</b></button>

<button style="width:65;height:65" onClick="window.location='http://www.javascriptkit.com'"><b>Home</b></button>

<button style="width:65;height:65" onClick="window.location.reload()"><b>Reload</b></button>

<button style="width:65;height:65" onClick="window.close()"><b>Close</b></button>