Create slide in switch with CSS only - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Slider

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Slider

Description

Create slide in switch with CSS only

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta charset="utf-8"> 
  <style>
.switch-field {<!-- ww  w . java 2  s  . c o m-->
   display:table-cell;
   vertical-align:middle;
}

input.switch {
   position:absolute;
   margin-left:-10000px;
   visibility:hidden;
}

input.switch + label {
   background-color:Chartreuse;
   border:2px solid yellow;
   display:block;
   position:relative;
   cursor:pointer;
   outline:none;
   -webkit-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
   user-select:none;
}

input.switch + label, input.switch + label:before, input.switch + label:after {
   -webkit-border-radius:3.5em;
   -moz-border-radius:3.5em;
   -ms-border-radius:3.5em;
   -o-border-radius:3.5em;
   border-radius:3.5em;
}

input.switch + label {
   background-color:blue;
   border:2px solid pink;
   width:5.9em;
   height:3.5em;
   overflow:hidden;
}

input.switch + label:before, input.switch + label:after {
   display:block;
   position:absolute;
   top:0;
   left:0;
   bottom:0;
   content:"";
}

input.switch + label:before {
   background-color:WhiteSmoke;
   right:0;
   -webkit-transition:background 0.4s;
   -moz-transition:background 0.4s;
   -o-transition:background 0.4s;
   transition:background 0.4s;
}

input.switch + label:after {
   background-color:OrangeRed;
   width:3.5em;
   width:calc(3.5em - 3px);
   -webkit-box-shadow:2px 0 4px grey;
   -moz-box-shadow:2px 0 4px BlueViolet;
   box-shadow:2px 0 4px Chartreuse;
   -webkit-transition:margin 0.4s;
   -moz-transition:margin 0.4s;
   -o-transition:margin 0.4s;
   transition:margin 0.4s;
}

input.switch:checked + label:before {
   background-color:yellow;
   content:'ON';
   text-align:left;
   color:blue;
   padding:6px
}

input.switch:checked + label:after {
   margin-left:3.6em;
   text-align:right;
}
</style> 
 </head> 
 <body> 
  <div class="switch-field"> 
   <input id="cmn-toggle-1" class="switch" type="checkbox"> 
   <label for="cmn-toggle-1"></label> 
  </div>  
 </body>
</html>

Related Tutorials