HTML

<div class="container">
  <input type="checkbox" id="switch"/>
  <label for="switch" class="switch">
    <div>
      <ul class="top">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul class="bottom">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <span class="button"></span>
    </div>
    <span class="on"></span>			
    <span class="off"></span>
  </label>
</div>

CSS

body {
  background : #1b1b1b;
}

.container {
  width  : 400px;
  height : 150px;
  margin : 10px auto;
  padding-top: 100px;
}

#switch {
  display : none;
}

.switch {
  display  : block;
  position : relative;
  width    : 190px;
  height   : 52px;
  margin   : auto;
  border-radius : 25px;
  box-shadow : 0 -2px 3px 0px rgba(0, 0, 0, 0.5) , 0 2px 3px 0px rgba(100, 100, 100, 0.5);
}

.switch > div {
  overflow : hidden;
  position : absolute;
  width    : inherit;
  height   : inherit;
  border-radius: inherit;
}

.switch .top , .switch .bottom {
  list-style-type : none;
  position : absolute;
  left     : 7px;
  width    : 200px;
  transition : all .5s linear;
}

.switch .top {
  top : -5px;
  transform : rotate(4deg);
}

.switch .bottom {
  bottom : -5px;
  transform : rotate(-4deg);
}

.switch li {
  width  : 15px;
  height : 10px;
  background : #fff;
  float  : left;
  margin-left: 5px;
  border-radius : 3px;
}

.top li {
  box-shadow : inset 0 0 10px 1px rgba(0, 0, 0, 0.8),0 0 10px 2px #000;
}

.bottom li {
  box-shadow : inset 0 0 10px 1px rgba(0, 0, 0, 0.3),0 0 10px 2px #000;	
}

label .button {
  display  : block;
  position : absolute;
  width    : 50px;
  height   : 50px;
  top      : 1px;
  left     : 0;
  cursor   : pointer;
  border-radius : 50%;
  background : #1b1b1b;
  background-image : -webkit-linear-gradient(top, #32393a 10% , #1b1b1b 60% , ,#101718  100%);
  box-shadow : inset 0 1px 1px 0 #999 , inset 0 -1px 1px 0 #000,inset 0 0 15px 0 rgba(0,255, 0, 0.2);
  transition : left .5s linear , box-shadow .3s .2s linear;
}

label .button:after {
  display : block;
  content : '|||';
  text-align  : center;
  line-height : 44px;
  color       : #000;
  text-shadow : 1px 0 0 rgba(200, 200, 200, 0.2);
  font-size   : 25px;
  font-weight : bold;
  letter-spacing : 3px;
}

.on , .off {
  display : block;
  position: absolute;
  width   : 20px;
  height  : 20px;
  border-radius : 50%;
  top     : -35px;
  transition : all .2s .3s linear;
}

.on {
  left : 20px;
  background : #0F0;
  box-shadow : inset 0 0 10px 2px #000,0 -1px 1px 1px #000,0 1px 1px 1px #333,0 0 30px 0 #0F0;
}

.off {
  right : 20px;
  background : #500;
  box-shadow : inset 0 0 10px 2px #000,0 -1px 1px 1px #000,0 1px 1px 1px #333;
}

.on:before , .off:before {
  position : absolute;
  top      : -30px;
  font-size: 20px;
  font-family : corbel;
  transition : all .2s .3s linear;
}

.on:before {
  content : 'on';
  color    : #FFF;
}

.off:before {
  content : 'off';
  color    : rgba(250, 250, 250, 0.3);
}

#switch:checked + label .button {
  left : 140px;
  box-shadow : inset 0 1px 1px 0 #999 , inset 0 -1px 1px 0 #000,inset 0 0 15px 0 rgba(255, 0, 0, 0.2);
  transition : left .5s linear , box-shadow .3s .2s linear;

}

#switch:checked + label .top {
  transform : rotate(-4deg);
  transition : all .5s linear;
}

#switch:checked + label .bottom {
  transform : rotate(4deg);
  transition : all .5s linear;
}

#switch:checked + label .on {
  background : #050;
  box-shadow : inset 0 0 10px 2px #000,0 -1px 1px 1px #000,0 1px 1px 1px #333;
  transition : all .2s .3s linear;
}

#switch:checked + label .off {
  background : #F00;
  box-shadow : inset 0 0 10px 2px #000,0 -1px 1px 1px #000,0 1px 1px 1px #333,0 0 30px 0 #F00;
  transition : all .2s .3s linear;
}

#switch:checked + label .on:before {
  color : rgba(250, 250, 250, 0.3);
  transition : all .2s .3s linear;
}

#switch:checked + label .off:before {
  color : #FFF;
  transition : all .2s .3s linear;
}

Java script

ندارد

دموی آنلاین

تا بارگذاری کامل کمی صبر کنید

See the Pen FUN by Mojtaba Seyedi (@seyedi) on CodePen