Wednesday, 11 October 2017

How to make Toggle/Slider switch in html through css.

Published on No comments
In this blog we will see how to make Toggle/slider switch in html through css, you can do so by following the given codes below.

 Step 1:Go to notepad and type the given codes below.

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 .switch {
   position: relative;
   display: inline-block;
   width: 60px;
   height: 34px;
 }

 .switch input {display:none;}

 .slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: green;
   -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:green;
 }

 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%;
 }
 </style>
 </head>
 <body>

 <h2 text align="center">Toggle/Slider Switch</h2>
 

 <p>Click the the toggle Switch to see it working. </p>

 <label class="switch">
   <input type="checkbox" checked>
   <span class="slider"></span>
 </label>

 &nbsp &nbsp &nbsp

 <label class="switch">
   <input type="checkbox">
   <span class="slider round"></span>
 </label>

 </body>
 </html> 

 Step 2: Save the file in .html extension and run.


Share:

0 comments:

Post a Comment