input

<style>
#payt {display: none;}
[for="payt"] {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 40px;
  border-radius: 50px;
  background: rgb(71, 71, 71) linear-gradient(rgb(17, 17, 17), rgb(17, 17, 17), rgba(255, 255, 255,.2)) no-repeat 50% 50%;
  background-size: 80px 2px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.2);
  cursor: pointer;
}
[for="payt"]:before {
  content: "";
  position: absolute;
  left: 10px; top: 10px;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #ccc linear-gradient(#fcfff4, #dfe5d7 40%, #b3bead);
  transition: .5s;
}
#payt:checked ~ [for="payt"]:before {
  left: 90px;
}
</style>

<input type="checkbox" id="payt"/><label for="payt"></label>



<style>
#payt1 {display: none;}
[for="payt1"] {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 10px;
  border-radius: 3px;
  background: rgb(71, 71, 71);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.2);
  cursor: pointer;
}
[for="payt1"]:before {
  content: "";
  position: absolute;
  left: -8px; top: -3px;
  display: block;
  width: 16px;
  height: 16px;
  background: #dfe5d7 radial-gradient(#dfe5d7, #b3bead 80%, #fff 80%) no-repeat 50% 50%;
  transition: .5s;
}
#payt1:checked ~ [for="payt1"]:before {
  left: 32px;
}
</style>

<input type="checkbox" id="payt1"/><label for="payt1"></label>



ON
<style>
#payt2 {display: none;}
[for="payt2"] {
  position: relative;
  display: block;
  width: 90px;
  height: 10px;
  padding: 15px;
  border-radius: 50px;
  line-height: 10px;
  color: #31b3ff;
  text-shadow: 1px 1px 0px rgba(255,255,255,.15);
  background: rgb(71, 71, 71);
  box-shadow:
       0 1px 0 rgba(255,255,255,.2),
       inset 0 0 0 5px rgb(60, 60, 60),
       inset 0 6px 6px rgba(0,0,0,.5),
       inset 0 -6px 1px rgba(255,255,255,.2);
  cursor: pointer;
}
[for="payt2"]:before {
  content: "OFF";
  position: absolute;
  right: 15px;
  color: #000;
}
[for="payt2"]:after {
  content: "";
  position: absolute;
  left: 5px; top: 5px;
  display: block;
  width: 50px;
  height: 30px;
  border-radius: 50px;
  background: #ccc linear-gradient(#fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  transition: .5s;
}
#payt2:checked ~ [for="payt2"]:after {
  left: 65px;
}
</style>

<input type="checkbox" id="payt2"/><label for="payt2">ON</label>



<style>
#payt3 {display: none;}
[for="payt3"] {
  position: relative;
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background: #ddd linear-gradient(#ccc, #fff);
  box-shadow:
        inset 0 2px 1px rgba(0,0,0,.15),
        0 2px 5px rgba(200,200,200,.1);
  cursor: pointer;
}
[for="payt3"]:after {
  content: "";
  position: absolute;
  left: 40%; top: 40%;
  width: 20%;
  height: 20%;
  border-radius: 100%;
  background: #969696 radial-gradient(40% 35%, #ccc, #969696 60%);
  box-shadow:
        inset 0 2px 4px 1px rgba(0,0,0,.3),
        0 1px 0 rgba(255,255,255,1),
        inset 0 1px 0 white;
}
[for="payt3"]:before {
  content: "";
  position: absolute;
  top: 8%; right: 8%; bottom: 8%; left: 8%;
  border-radius: 100%;
  background: #eaeaea;
  box-shadow:
        0 3px 5px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.3),
        inset 0 -5px 5px rgba(100,100,100,.1),
        inset 0 5px 5px rgba(255,255,255,.3);
}
#payt3:checked ~ [for="payt3"]:before {
  background: #e5e5e5 linear-gradient(#dedede, #fdfdfd);
}
#payt3:checked ~ [for="payt3"]:after {
  background: #25d025 radial-gradient(40% 35%, #5aef5a, #25d025 60%);
  box-shadow:
        inset 0 3px 5px 1px rgba(0,0,0,.1),
        0 1px 0 rgba(255,255,255,.4),
        0 0 10px 2px rgba(0, 210, 0, .5);
}
</style>

<input type="checkbox" id="payt3"/><label for="payt3"></label>



<style>
#payt4 {display: none;}
[for="payt4"] {
  display: inline-block;
  padding: 7px;
  border-radius: 100px;
  background: rgba(0, 0, 0, .1);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .4) inset, 0 1px 1px 0 rgba(255, 255, 255, .1);
  text-shadow: 0 1px rgba(0, 0, 0, .5);
  cursor: pointer;
}
[for="payt4"]:before, [for="payt4"]:after {
  display: inline-block;
  padding: 5px 20px;
}
[for="payt4"]:before {
  content: "ВЫКЛ";
  border-radius: 100px 0 0 100px;
  background: rgba(0, 0, 0, .3) linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,0));
  color: rgba(0,0,0,.4);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .5) inset, 0 1px 0 rgba(255, 255, 255, .4);
}
[for="payt4"]:after {
  content: "ВКЛ";
  border-radius: 0 100px 100px 0;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.3));
  box-shadow: inset 0 1px 1px 0 rgba(255,255,255,.2), 0 1px 2px 0 rgba(0,0,0,.5);
}
#payt4:checked ~ [for="payt4"]:after {
  background: rgba(0, 0, 0, .3) linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,0));
  box-shadow: 0 1px 1px rgba(0, 0, 0, .5) inset, 0 1px 0 rgba(255, 255, 255, .4);
  color: rgba(0,0,0,.4);
}
#payt4:checked ~ [for="payt4"]:before {
  box-shadow: inset 0 1px 1px 0 rgba(255,255,255,.2), 0 1px 2px 0 rgba(0,0,0,.5);
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.3));
  color: inherit;
}
</style>

<input type="checkbox" id="payt4"/><label for="payt4"></label>




<style>
#payt5 {display: none;}
[for="payt5"] {
  position: relative;
  display: block;
  width: 40px;
  height: 70px;
  border-style: solid;
  border-color: rgb(30, 30, 30);
  border-width: 10px 1px;
  border-radius: 30px;
  background-image: linear-gradient(to right, rgb(45, 45, 45), rgb(75, 75, 75), rgb(45, 45, 45));
  box-shadow:
       0 0 0 1px rgb(22, 22, 22),
       0 0 0 2px rgb(100, 100, 100),
       0 0 0 3px rgb(20, 20, 20),
       0 0 0 4px rgb(200, 200, 200);
  cursor: pointer;
}
[for="payt5"]:before {
  content: "";
  position: absolute;
  left: 5px; top: 22px;
  display: block;
  width: 28px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 100%;
  background: #ccc radial-gradient(#ccc, rgb(0, 0, 0) 80%);
}
[for="payt5"]:after {
  content: "";
  position: absolute;
  left: 8px; top: 2px;
  width: 24px;
  height: 10px;
  border-bottom: 2px solid rgb(174, 178, 179);
  border-radius: 100%;
  background: rgb(85, 85, 85) linear-gradient(to right, rgb(95, 95, 95), rgb(135, 135, 135));
}
[for="payt5"] span {
  position: absolute;
  left: 8px; top: 8px;
  width: 24px;
  height: 36px;
  border-bottom: 1px solid #000;
  border-radius: 0 0 20px 20px;
  background: rgb(51, 51, 51) linear-gradient(to right, rgb(17, 17, 17), rgb(119, 119, 119) 40%, rgb(136, 136, 136), rgb(119, 119, 119) 60%, rgb(17, 17, 17)) no-repeat;
}
#payt5:checked ~ [for="payt5"]:after {
  left: 8px; top: 58px;
  border-bottom: none;
  border-top: 2px solid rgb(174, 178, 179);
}
#payt5:checked ~ [for="payt5"] span {
  top: 27px;
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}
</style>

<input type="checkbox" id="payt5"/><label for="payt5"><span></span></label>



<style>
#payt6 {display: none;}
.switch {
  position: relative;
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  box-shadow:
        inset 0 1px 0 rgba(255,255,255,.1),
        0 1px 2px rgba(0,0,0,.3),
        0 0 10px rgba(0,0,0,.15),
        inset 0 0 0 3px #fff,
        inset 0 5px 5px 1px rgba(0,0,0,0.13);
}
[for="payt6"] {
  position: absolute;
  left: 8px; top: 8px;
  display: block;
  height: 52px;
  width: 52px;
  border: 1px solid rgb(150,150,150);
  border-radius: 30px;
  background: linear-gradient(#f7f2f6, #b2ac9e);
  box-shadow:
        inset 0 0 1px rgba(255,255,255,0.13),
        0 3px 6px rgba(0,0,0,0.35);
  transition: .5s;
  cursor: pointer;
}
[for="payt6"]:before, [for="payt6"]:after {
  content: "";
  position: absolute;
  top: 8px;
  height: 36px;
  width: 21px;
}
[for="payt6"]:before {
  left: 2px;
  border-radius: 30px 10px 10px 30px;
  background: #fff linear-gradient(to left, #cbc7bc, #d2cbc3);
  box-shadow: -2px 0 5px  rgba(0,0,0,0.2) inset;
}
[for="payt6"]:after {
  right: 2px;
  border-radius: 10px 30px 30px 10px;
  background: #fff linear-gradient(to right, #cbc7bc, #d2cbc3);
  box-shadow: 2px 0 5px rgba(0,0,0,0.2) inset;
}
#payt6:checked ~ .switch label {
  transform: rotate(90deg);
  background: linear-gradient(to right, #f7f2f6, #b2ac9e);
  box-shadow:
        inset 0 0 1px rgba(255,255,255,0.13),
        3px 0 6px rgba(0,0,0,.35);
}
</style>
<input type="checkbox" id="payt6"/><div class="switch"><label for="payt6"></label></div>