body {
background: linear-gradient(to bottom, #f1ece8, #e7e0db);
  display: flex;
  align-items: center;
  height: 100vh;
  padding: 0;
  margin: 0;
}

#switch {
  position: absolute;
  left: -9999px;
}

.switch {
  position      : relative;
  display       : block;
  width         : 30px;
  padding       : 15px;
  height        : 19px;
  border-radius : 50%;
  margin        : 50px auto; 
  border-bottom : 4px solid #b2afaa;
  box-shadow    : inset 0 2px 3px 0px #FFF , inset 0 -1px 2px 0px #999 , 0 3px 3px -1px #222;
  cursor        : pointer;  
  background: linear-gradient(to bottom, rgba(233,228,224,1) 0%, rgba(233,228,224,1) 67%, rgba(249,244,240,1) 75%, rgba(239,239,239,1) 100%);
}

.switch:before {
  display  : block;
  content  : "";
  z-index  : -1;
  position : absolute;
  top      : -6px;
  left     : -6px;
  width    : 68px;
  height   : 68px;
  border-radius : inherit;
  border   : 2px solid #eee;
  background: rgb(144,136,123);
  background: linear-gradient(to bottom, rgba(144,136,123,1) 0%, rgba(144,136,123,1) 21%, rgba(154,147,131,1) 29%, rgba(204,193,171,1) 50%, rgba(213,203,178,1) 55%, rgba(221,211,184,1) 61%, rgba(221,211,184,1) 100%);
}

.switch:after {
  content : "ON";
  position : absolute;
  top      : -40px;
  left     : 17px;
  color    : #daaa18;
  font-family : "Verdana";
  text-shadow : 0 -1px 0 #999 , 1px 1px 0 #FFF;
  font-size   : 14px;
}

.switch .bg {
  display : block;
  position: absolute;
  top     : 0;
  left    : 0;
  z-index : -1;
  width   : 60px;
  height  : 60px;
  border-radius : 50%;
  background : #daaa18;
}

i {
  float  : left;
  width  : 3px;
  height : 3px;
  border-radius : 50%;
  background  : #efefef;
  box-shadow  : 0 1px 1px 0 #999;
  margin      : 2px 1px 2px 3px;
}

i:nth-child(14) , i:nth-child(15) , i:nth-child(16) , i:nth-child(17) {
  height : 1px;
}

#switch:checked + .switch {
  background    : #ede8e2;
  border        : 1px solid #6f6658;
  height        : 30px;
  box-shadow    : inset 0 2px 3px 0px #FFF , inset 0 -1px 2px 0px #999;
}

#switch:checked + .switch i {
  height : 3px;
}

#switch:checked + .switch:after {
  content : "OFF";
  color   : #aaa;
}