Others


Others


How to create Toggle (ON/OFF) switch using HTML and CSS


In this example, we will create a Toggle switch with a label (ON/OFF) containing an input checkbox.

The following example shows, how to create Toggle switch using HTML and CSS

Example : index.html 
<html>
  <head>
    <style>
      .switch{
        width:80px;
        height:30px;
        padding:5px;
        border-radius:2px;
        position:relative;
        overflow:hidden;
        box-sizing:border-box;
        display:inline-block;
      }
      .checkbox{
        position:absolute;
        left:-2px;
        top:-2px;
        width:80px;
        height:80px;
        z-index:10;
        opacity:0;
        cursor:pointer;
      }
      .slider{
        display:inline-block;
        position:absolute;
        width:40px;
        height:30px;
        left:0;
        top:0;
        z-index:5;
        padding:8px;
        color:white;
        font-size:12px;
      }
      .slider:before{
        content:' ';
        position:absolute;
        width:32px;
        height:25px;
        left:2px;
        top:2px;
        z-index:-1;
        background:#ff0000;
        transition: 0.3s ease all;
        border-radius:2px;
      }
      .slider:after{
        content:'ON';
        position:absolute;
        width:40px;
        height:20px;
        left:40px;
        top:0;
        color:black;
        padding:8px;
        font-size:12px;
      }
      
      .checkbox:checked + .slider:before{
        left:44px;
        background:#4da86c;
      
      }
      .checkbox:checked + .slider:after{
        color:white;
      
      }
      .checkbox:checked + .slider{
        color:black;
      }
      
      .layer{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background:#ffedea;
        transition: 0.3s ease all;
      }
      
      .checkbox:checked ~ .layer{
        background:#edfcf2;
      }
    </style>
  </head>
  <body>
    <div class='switch'>
      <input type="checkbox" class="checkbox">
      <span class="slider">OFF</span>
      <div class='layer'></div>
    </div>
    
    <br></br>
    
    <div class='switch'>
      <input type="checkbox" class="checkbox" checked>
      <span class="slider">OFF</span>
      <div class='layer'></div>
    </div>
    
  </body>
</html>
Try it Yourself