toggle switch small

by joplomacedo

HTML

<span class="device">
  <span class="switch is-on"></span>
</span>

CSS

* {
  -webkit-box-sizing: border-box;
}


.device {
  z-index: 1;
  position: relative;
  display: inline-block;
  width: 52px;
  height: 17px;
  padding: 2px 4px;
  background: grey;
  border-radius: 50px;
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 1px 6px rgba(0, 0, 0, 0.53), inset 0 3px 8px white, inset 0 1px rgba(0, 0, 0, 0.21);
  cursor: pointer;
}

.device:after,
.device:before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 9px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 1px 6px rgba(0, 0, 0, 0.53), inset 0 3px 8px white, inset 0 1px rgba(0, 0, 0, 0.21);
}

.device:before {
  left: 8px;
  background: #749621;
}

.device:after {
  right: 5px;
  background: none;
}



.switch {
  position: absolute;
  z-index: 1;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 22px;
  background: blue;
  vertical-align: top;
  border-radius: 50px;
  -webkit-transition: .2s;
  box-shadow: inset 0 0 0px 1px rgba(0, 0, 0, 0.26), 0 7px 7px -5px rgba(0, 0, 0, 0.69), inset 1px 1px white;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%,rgba(248, 248, 248, 1) 100%);
}

.switch.is-on {
  -webkit-transform: translateX(29px);
}

.switch.is-off {
   -webkit-transform: translateX(1px);
}

JavaScript

function $(sel) {
  return document.querySelector(sel);
}

var switch_ = $('.switch'),
    i = 1;

$('.device').onclick = function () {
  if ( ++i%2 )
  return switch_.className= "switch is-on";
  switch_.className = "switch is-off";
};