How To Create a Toggle Switch with HTML and CSS

Sometimes, we find yourself needing users to check/uncheck a checkbox to signify a yes/no answer to some question or statement. Therefore, in this tutorial, we look at some CSS toggle switch examples. We’ll be using pure CSS to create some toggle switches, adding a neat user experience to checkbox functionality.

How To Create a Toggle Switch

Step 1. Add the following HTML codes to your web page or application:

<!-- Rectangular switch --> 
<label class="switch"> 
    <input type="checkbox"> 
    <div class="slider"></div> 
</label> 
<br> 
<br> 
<!-- Rounded switch --> 
<label class="switch"> 
    <input type="checkbox"> 
    <div class="slider round"></div> 
</label>

Step 2. Add the following CSS codes for styling our Toggle switches:

/* The switch - the box around the slider */ 
  
 .switch { 
     position: relative; 
     display: inline-block; 
     width: 60px; 
     height: 34px; 
 } 
 /* Hide default HTML checkbox */ 
  
 .switch input { 
     display: none; 
 } 
 /* The slider */ 
  
 .slider { 
     position: absolute; 
     cursor: pointer; 
     top: 0; 
     left: 0; 
     right: 0; 
     bottom: 0; 
     background-color: #ccc; 
     -webkit-transition: .4s; 
     transition: .4s; 
 } 
 .slider:before { 
     position: absolute; 
     content: ""; 
     height: 26px; 
     width: 26px; 
     left: 4px; 
     bottom: 4px; 
     background-color: white; 
     -webkit-transition: .4s; 
     transition: .4s; 
 } 
 input:checked + .slider { 
     background-color: #2196F3; 
 } 
 input:focus + .slider { 
     box-shadow: 0 0 1px #2196F3; 
 } 
 input:checked + .slider:before { 
     -webkit-transform: translateX(26px); 
     -ms-transform: translateX(26px); 
     transform: translateX(26px); 
 } 
 /* Rounded sliders */ 
  
 .slider.round { 
     border-radius: 34px; 
 } 
 .slider.round:before { 
     border-radius: 50%; 
 }