On/off button in HTML

The on/off button shows the active or inactive state of a function in a web application, and the easiest is a mock-LED.

Example in 32 x 32 pixels...

off

HTML code

<button class="onoff" onclick="onoff(this)"><div>off</div></button>

It's just a standard button with a layer inside to represent the LED enlightened when the state is on, gray otherwise.

CSS code

.onoff
{
  width:32px;
  height:32px;
  padding:1px 2px 3px 3px;	
  font-size:12px;
  background:lightgray;
  text-align:center;	
}
.onoff div
{
  width:18px;
  height:18px;
  min-height:18px;	
  background:lightgray;
  overflow:hidden;
  border-top:1px solid gray;
  border-right:1px solid white;
  border-bottom:1px solid white;
  border-left:1px solid gray;			
  margin:0 auto;
  color:gray;
}

The width, height and min-height will be adjusted to the size of the indicator.

JavaScript code

var buttonstate=0;
function onoff(element)
{
  buttonstate= 1 - buttonstate;
  var blabel, bstyle, bcolor;
  if(buttonstate)
  {
    blabel="on";
    bstyle="green";
    bcolor="lightgreen";
  }
  else
  {
    blabel="off";
    bstyle="lightgray";
    bcolor="gray";
  }
  var child=element.firstChild;
  child.style.background=bstyle;
  child.style.color=bcolor;
  child.innerHTML=blabel;
}

The onoff() function has a parameter which is the button in question, and is called when you click on it, through the onClick event, and passes from one state to another.
This gives the global variable buttonstate the value 1 for active and 0 for inactive.
The program using the button reads thus this variable.
You can also trigger an action by calling another function from the onoff() function.