CSS Toggle Switch

Toggle switch has become one of the popular form elements in mobile apps, sometimes, on desktop website. It makes perfect sense while we use it on touch screen devices because it works exactly like those switches in our living space.

HTML:
<div class="container">
  <label class="switch"><input type="checkbox" />    <div></div>
  </label>
</div>

CSS:
html {
  background: #878476;
}

.container {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  height: 40px;
  margin: auto;
  text-align: center;
}

/** Switch
 -------------------------------------*/

.switch input {
  position: absolute;
  opacity: 0;
}

/**
 * 1. Adjust this to size
 */

.switch {
  display: inline-block;
  font-size: 20px; /* 1 */
  height: 1em;
  width: 2em;
  background: #BDB9A6;
  border-radius: 1em;
}

.switch div {
  height: 1em;
  width: 1em;
  border-radius: 1em;
  background: #FFF;
  box-shadow: 0 0.1em 0.3em rgba(0,0,0,0.3);
  -webkit-transition: all 300ms;
     -moz-transition: all 300ms;
          transition: all 300ms;
}

.switch input:checked + div {
  -webkit-transform: translate3d(100%, 0, 0);
     -moz-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}