Buttons with Style

Basic, but functional, giving all the appearance of a button.
Colour is the key, by varying the shades of the background and border colours on different mouse events.
To further the impression of a button being pressed the font size is reduced by 1 and the text colour darkened when the mouse is pressed.

The button effects are stated between STYLE tags.
Each button and its mouse events are stated between individual DIV containers.
To position a set of buttons place the required number of DIV containers within its own DIV container

You can even use an image for the background by changing the background:#nnnnnn attribute to background-image:url(image.jpg).

The Basics

In order to create a button you need to assign the appropriate definitions to a classname.
The classname and definitions are placed between Style tags. Note the dot before the classname.

.classname{Definitions}

<STYLE>

.default{width:100; height:20;text-align:center;font-size:10;color:#FFFFFF;vertical-align:center;border-top:1px solid #aa7744; border-right:1px solid #770000; border-bottom:1px solid #770000;border-left:1px solid #aa7744; background:#440000}

.buttonover{width:100; height:20;text-align:center;font-size:10;vertical-align:center;color:#FF0000;border-top:1px solid #aa7744; border-right:1px solid #770000; border-bottom:1px solid #770000;border-left:1px solid #aa7744; background:#600000}

.buttdown{width:100; height:20;text-align:center;font-size:9;vertical-align:center;color:#AA0000;border-top:1px solid #770000; border-right:1px solid #aa7744; border-bottom:1px solid #aa7744;border-left:1px solid #660000; background:#440000}

</STYLE>

You then create your button by using the <DIV> </DIV> tags to contain the mouse events that will call their respective classnames. The most common mouse events used are, Onmouseover, Onmouseout, and Onmousedown

First you give your button default colours by assigning it a default classname.
You then assign definitions for the other events.

So to have your button change you go:

1. Default = colours 1.
2. Onmouseover = colours 2.
3. Onmousedown = colours 3.
4. Onmouseout = colours 1, to return back to the default colours.

<DIV class="default" Onmouseover="this.className='buttonover'" Onmousedown="this.className='buttondown'" Onmouseout="this.className='default'">
Button 1
</DIV>

Below is the code for the green set of buttons above.

<style>
.button{width:100; height:20;text-align:center;font-size:10;vertical-align:center;color:white;border-top:1px solid #77aa44; border-left:1px solid #77aa44; border-right:1px solid #007700; border-bottom:1px solid #007700; background:#004400}

.buttonover{width:100; height:20;text-align:center;font-size:10;vertical-align:center;color:#00FF00;border-top:1px solid #77aa44; border-left:1px solid #77aa44; border-right:1px solid #007700; border-bottom:1px solid #007700; background:#006000}

.buttondown{width:100; height:20;text-align:center;font-size:9;vertical-align:center;color:#00AA00;border-top:1px solid #007700; border-left:1px solid #006600; border-right:1px solid #77aa44; border-bottom:1px solid #77aa44; background:#005000}
</style>

<div style="position:absolute; top:80; left:60;cursor:hand">

<div class="button" onmouseover="this.className='buttonover'" onmousedown="this.className='buttondown'" onmouseup="this.className='buttonover'" onmouseout="this.className='button'">BUTTON 1</div>

<div class="button" onmouseover="this.className='buttonover'" onmousedown="this.className='buttondown'" onmouseup="this.className='buttonover'" onmouseout="this.className='button'">BUTTON 2</div>

<div class="button" onmouseover="this.className='buttonover'" onmousedown="this.className='buttondown'" onmouseup="this.className='buttonover'" onmouseout="this.className='button'">BUTTON 3</div>

<div class="button" onmouseover="this.className='buttonover'" onmousedown="this.className='buttondown'" onmouseup="this.className='buttonover'" onmouseout="this.className='button'">BUTTON 4</div>

</div>

Colour Schemes used in the above examples.
Each scheme comprises of 3 events, Default, Onmouseover, and Onmousedown.

Event	Top	Right	Bottom	Left	Background	Text Colour	Font size
Default	#77AA44	#007700	#007700	#77AA44	#004400	#FFFFFF	10
Onmouseover	#77AA44	#007700	#007700	#77AA44	#006000	#00FF00	10
Onmousedown	#007700	#77aa44	#77AA44	#007700	#005000	#00AA00	9
Default	#AAAA44	#777700	#777700	#AAAA44	#444400	#FFFFFF	10
Onmouseover	#AAAA44	#777700	#777700	#AAAA44	#606000	#FFFF00	10
Onmousedown	#777700	#AAAA44	#AAAA44	#777700	#505000	#AAAA00	9
Default	#AA7744	#770000	#770000	#AA7744	#440000	#FFFFFF	10
Onmouseover	#AA7744	#770000	#770000	#AA7744	#600000	#FF0000	10
Onmousedown	#770000	#AA7744	#AA7744	#770000	#440000	#AA0000	9
Default	#4477AA	#000077	#000077	#4477AA	#000044	#FFFFFF	10
Onmouseover	#4477AA	#000077	#000077	#4477AA	#000070	#0000FF	10
Onmousedown	#000077	#4477AA	#4477AA	#000077	#000044	#0000AA	9
Default	#EEEEEE	#DDDDDD	#CCCCCC	#BBBBBB	#B0BBCE	#FFFFFF	10
Onmouseover	#93A2BB	#93A2BB	#93A2BB	#93A2BB	#B0BBCE	#93ACBB	10
Onmousedown	#DCE1E9	#DCE1E9	#DCE1E9	#DCE1E9	#93A2BB	#B0BBCE	9