How to create Toggle Switch in css?

We can create toggle switch in CSS need to use input type checkbox (<input type="checkbox">) HTML tag. Also, we need to most important CSS before element as we are using the below code. Also, you can learn about CSS after click here.

.anySwitch .switch { positionrelativedisplayinline-blockwidth34pxheight16px; }
.anySwitch .switch input { displaynone; }
.AnySlider { positionabsolutecursorpointertop0left0right0bottom0background#ccc-webkit-transition.4stransition.4s; }
.AnySlider:before { positionabsolutecontent""height10pxwidth10pxleft5pxbottom3pxbackgroundwhite-webkit-transition.4stransition.4s; }
input:checked + .AnySlider { background#45be4c; }
input:focus + .AnySlider { box-shadow0 0 1px #45be4c; }
input:checked + .AnySlider:before { -webkit-transformtranslateX(15px); -ms-transformtranslateX(15px); transformtranslateX(15px); }
.AnySlider.round { border-radius20px; }
.AnySlider.round:before { border-radius50%; }

<div class="anySwitch">
  <label class="switch">
    <input type="checkbox">
    <span class="AnySlider round"></span> </label>
  <label class="switch">
    <input type="checkbox" checked>
    <span class="AnySlider round"></span> </label>

When you will use this code then you will find look like this screenshot.

.anySwitchText .switch { positionrelative;
.anySwitchText .switch input { displaynone; }
.AnySliderText { positionabsolutecursorpointertop0left0right0
    bottom0background#ccc-webkit-transition.4stransition.4s; }
.AnySliderText:before {positionabsolute;
    transition.4s; }
input:checked + .AnySliderText { background#5740ac; }
input:focus + .AnySliderText { box-shadow0 0 1px #5740ac; }
input:checked + .AnySliderText:before { -webkit-transform: translateX(15px); 
    -ms-transform: translateX(15px); transform: translateX(15px); 
    background#46338c; }
.AnySliderText.round { border-radius20px; }
.AnySliderText.round:before { border-radius50%; }

<div class="anySwitchText">
                        <label class="switch">
                          <input type="checkbox" checked> 
                          <span class="AnySliderText round"></span></label> 
                          Check me for Newsletter

No comments:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.