on off on toggle switch using html and css

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 slide, first 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

on off on toggle switch using html and css

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

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

how to remove noise from voice using fl studio

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

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