Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. input[type=checkbox] {
  2.     display: none !important;
  3. }
  4.  
  5. .coolCheck {
  6.     width: 80px;
  7.     height: 26px;
  8.     color: #000;
  9.     margin: 20px auto;
  10.  
  11.     -webkit-border-radius: 50px;
  12.     -moz-border-radius: 50px;
  13.     border-radius: 50px;
  14.     position: relative;
  15.  
  16.     -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
  17.     -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
  18.     box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
  19. }
  20.  
  21. .coolCheck:after {
  22.     content: 'OFF';
  23.     font: 12px/26px Arial, sans-serif;
  24.     color: #FA0009;
  25.     position: absolute;
  26.     right: 10px;
  27.     z-index: 0;
  28.     font-weight: bold;
  29.     text-shadow: 1px 1px 0px rgba(255,255,255,.15);
  30. }
  31.  
  32. .coolCheck:before {
  33.     content: 'ON';
  34.     font: 12px/26px Arial, sans-serif;
  35.     color: #4875DF;
  36.     position: absolute;
  37.     left: 10px;
  38.     z-index: 0;
  39.     font-weight: bold;
  40. }
  41.  
  42. .coolCheck label {
  43.     display: block;
  44.     width: 34px;
  45.     height: 20px;
  46.  
  47.     -webkit-border-radius: 50px;
  48.     -moz-border-radius: 50px;
  49.     border-radius: 50px;
  50.  
  51.     -webkit-transition: all .4s ease;
  52.     -moz-transition: all .4s ease;
  53.     -o-transition: all .4s ease;
  54.     -ms-transition: all .4s ease;
  55.     transition: all .4s ease;
  56.     cursor: pointer;
  57.     position: absolute;
  58.     top: 3px;
  59.     left: 3px;
  60.     z-index: 1;
  61.     -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
  62.     -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
  63.     box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
  64.    
  65.  
  66.     background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  67.     background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  68.     background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  69.     background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  70.     background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  71. }
  72.  
  73. .coolCheck input[type=checkbox]:checked + label {
  74.     left: 43px;
  75. }