on off on toggle switch using html and css


Share on Facebook Twitter

1 years ago -   September 19, 2018

before start to describe anything lets see in the DEMO box ie what we are going to learn. of course this
is pure HTML/CSS on off on toggle switch(checkbox) which you have seen many time in google 
account. In this blog, I have describe how to construct it using HTML  and CSS only 

DEMO

    Now i am OFF  if you click on me I become ON you are free to repeat it                      

    Now i am ON  if you click on me i become OFF you are free to repeat it                        


if you want to implement this ON OFF ON toggle switch in your web page quickly then copy this 
source code, but I recommend to understand how this code really works.it may be that you have to 
change its color,size or shape according to your project so after the end of this source code I have 
described its every line of code in depth.

SOURCE CODE(switch_toggle.html)
<!DOCTYPE html>
<html>
<head>

<style>
.toggle_switch 
 {
  width: 60px;
  height: 20px; 
  position: relative;
  display: inline-block;
  
 }

.toggle_switch input {display:none;}

.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: 1px; 
   top: -4px;
   background-color: white;
   -webkit-transition: .4s;
   transition: .4s; border:2px solid gray; 
   }
 input:checked + .slider 
  { 
  background-color: #2196F3; 
  } 
  
 input:focus + .slider 
  { 
    box-shadow: 0 0 1px #2196F3;
  }
  
 input:checked + .slider:before 
 {
	 -webkit-transform: translateX(29px);
	 -ms-transform: translateX(29px);
	 transform: translateX(29px);
	 border:2px solid #2196F3
 }
	
 .slider { border-radius: 50px; }
 
 .slider:before { border-radius: 100%; }

</style>

</head>
<body>

<!------- this html code of switch toggle  ---------->
    <label class="toggle_switch"> 
	   <input type="checkbox"> 
	   <span class="slider"></span> 
    </label> 
<!------------ end of switch toggle ---------------->
	
<!----------- this html code of switch ------> 
	   <label class="toggle_switch"> 
	   <input type="checkbox" checked="">
	   <span class="slider"></span> 
	   </label> 
<!------------ end of switch toggle ---------------->
</body>

</html>

CODE EXPLANATION
In HTML under the body first take <label class="toggle_switch"> tag with class .toggle_switch and inside
this we take an input type <input type="checkbox"> and a <span class="slider">  tag with class .slider like  given in the code block
<body>

<!------- this html code of switch toggle  ---------->
    <label class="toggle_switch"> 
	   <input type="checkbox"> 
	   <span class="slider"></span> 
    </label> 
<!------------ end of switch toggle ---------------->
	
<!----------- this html code of switch ------> 
	   <label class="toggle_switch"> 
	   <input type="checkbox" checked="">
	   <span class="slider"></span> 
	   </label> 
<!------------ end of switch toggle ---------------->
</body>
OUTPUT

 
now by using of css we make checkbox input functionality like sliding toggle switch. in output label  
is the static rounded box on which span tag slidefirst we have to style label tag so inside the style
tag following code block we write for class .toggle_switch  of label tag

.toggle_switch 
 {
  width: 60px;
  height: 20px; 
  position: relative;
  display: inline-block;
 }
in this code block, width and  height is the size of our switch you can change it according
to your requirement 

then we hide input checkbox
.toggle_switch input {display:none;}

now we style span tag by using flowing code block in style tag

..slider 
 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
 }
here  -webkit-transition: .4s; transition: .4s; is define the time of animation of span tag we keep its
position absolute so that it is overlapped on label tag 

next is we set background color and box shadow of label appear  when the slider is checked

input:checked + .slider  { background-color: #2196F3;}

input:focus + .slider { box-shadow: 0 0 1px #2196F3; }

set the shape of label round-cornered rectangle box
.slider { border-radius: 50px; }

make the slider in a circle shape 
.slider:before { border-radius: 100%; }

finally, we set  how much pixel slider will move from its initial position  ie 0 to 29 pixel right
at 29-pixel slider end just corner of label tag which looks is nice 
 
.input:checked + .slider:before 
 {
      -webkit-transform: translateX(28px);
      -ms-transform: translateX(28px);
        transform: translateX(28px);
       border:2px solid #2196F3
 }
-webkit-transform: translateX(29px); is define for chrome browser -ms-transform: translateX(29px);
for mozila when it slide we set its  border:2px solid #2196F3 which appear same color of label

so finally our styling is complete now we can see it appear nice ON OFF ON toggle switch

thank you  


Whats new

how to make multiple selection in dropdown ( chosen select ) with select2 and ajax

6 month ago by techifind


how to make hand drawing effect for custom image in videoscribe using illustrator

1 years ago by techifind


how to remove noise from voice using fl studio

1 years ago by techifind

Subscribe to this blog and receive notifications of new posts by email.