<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>