switchButton

HTML

<script src="http://olance.github.io/jQuery-switchButton/jquery.switchButton.js"></script>

<div class="esterno">
<div class="checked" onclick="tswitch('1')">
</div>
<div class="unchecked" onclick="tswitch('0')">
</div>
</div>

<script>

function tswitch(go){
	
  if(go=="1"){
 
  	$(".unchecked").css("visibility","visible");
    $(".checked").css("visibility","hidden");
    $(".esterno").css("background","red");
  }
  else{
  	$(".unchecked").css("visibility","hidden");
    $(".checked").css("visibility","visible");
    $(".esterno").css("background","#aaa");
  }

}
</script>

CSS

.esterno{
  width:60px;
  height:30px;
  border:1px black solid;
  border-radius:20px;
  background:#aaa;
}
.checked{
  height:29px;
  width:29px;
  border:1px #eee solid;
  border-radius:30px;
  background:#ccc;
  float:left;
}
.unchecked{
  height:29px;
  width:29px;
  border-radius:30px;
  background:blue;
  float:left;
  visibility:hidden;
}