Ads Top

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.


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


<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>
</div>

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


<style>
.anySwitchTextfont-size16pxfont-familyArialHelveticasans-serif
    color#000margin-bottom30px;}
.anySwitchText .switch { positionrelative;
    displayinline-block;
    width34px;
    height16px;
    margin-bottom0;
    margin-right10px;
    vertical-alignmiddle;
    margin-top-4px;
 }
.anySwitchText .switch input { displaynone; }
.AnySliderText { positionabsolutecursorpointertop0left0right0
    bottom0background#ccc-webkit-transition.4stransition.4s; }
.AnySliderText:before {positionabsolute;
    content"";
    height22px;
    width22px;
    left0;
    bottom-3px;
    background#aaa;
    -webkit-transition.4s;
    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%; }
</style>

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


No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.