daily pastebin goal
41%
SHARE
TWEET

Untitled

a guest Jun 14th, 2018 49 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. Create This example for perfect solution.
  2.  
  3.  
  4.    <!DOCTYPE html>
  5.     <html>
  6.     <head>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <style>
  9.     .switch {
  10.       position: relative;
  11.       display: inline-block;
  12.       width: 60px;
  13.       height: 34px;
  14.     }
  15.  
  16.     .switch input {display:none;}
  17.  
  18.     .slider {
  19.       position: absolute;
  20.       cursor: pointer;
  21.       top: 0;
  22.       left: 0;
  23.       right: 0;
  24.       bottom: 0;
  25.       background-color: #ccc;
  26.       -webkit-transition: .4s;
  27.       transition: .4s;
  28.     }
  29.  
  30.     .slider:before {
  31.       position: absolute;
  32.       content: "";
  33.       height: 26px;
  34.       width: 26px;
  35.       left: 4px;
  36.       bottom: 4px;
  37.       background-color: white;
  38.       -webkit-transition: .4s;
  39.       transition: .4s;
  40.     }
  41.  
  42.     input:checked + .slider {
  43.       background-color: #2196F3;
  44.     }
  45.  
  46.     input:focus + .slider {
  47.       box-shadow: 0 0 1px #2196F3;
  48.     }
  49.  
  50.     input:checked + .slider:before {
  51.       -webkit-transform: translateX(26px);
  52.       -ms-transform: translateX(26px);
  53.       transform: translateX(26px);
  54.     }
  55.  
  56.     /* Rounded sliders */
  57.     .slider.round {
  58.       border-radius: 34px;
  59.     }
  60.  
  61.     .slider.round:before {
  62.       border-radius: 50%;
  63.     }
  64.     </style>
  65.     </head>
  66.     <body>
  67.  
  68.     <h2>Toggle Switch</h2>
  69.  
  70.     <label class="switch">
  71.       <input type="checkbox">
  72.       <span class="slider"></span>
  73.     </label>
  74.  
  75.     <label class="switch">
  76.       <input type="checkbox" checked>
  77.       <span class="slider"></span>
  78.     </label><br><br>
  79.  
  80.     <label class="switch">
  81.       <input type="checkbox">
  82.       <span class="slider round"></span>
  83.     </label>
  84.  
  85.     <label class="switch">
  86.       <input type="checkbox" checked>
  87.       <span class="slider round"></span>
  88.     </label>
  89.  
  90.     </body>
  91.     </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top