On/off button in HTML

The on/off button should show the active or inactive state of the function in the web application, and the easiest way is light similarity-diode.

HTML-code

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

This is a simple standard button with a layer inside to represent the illuminated diode in the active state .

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 properties will be adapted 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, which has a parameter, is called when it is clicked using the onClick event and switches from one state to another. This gives the global variable buttonstate a value of 1 for the asset and 0 for the inactive.
The program using the button will read this variable.
You can also call the action by calling another function from the onoff () function.