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 { position: relative; display: inline-block; width: 34px; height: 16px; }

.anySwitch .switch input { display: none; }

.AnySlider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #ccc; -webkit-transition: .4s; transition: .4s; }

.AnySlider:before { position: absolute; content: ""; height: 10px; width: 10px; left: 5px; bottom: 3px; background: white; -webkit-transition: .4s; transition: .4s; }

input:checked + .AnySlider { background: #45be4c; }

input:focus + .AnySlider { box-shadow: 0 0 1px #45be4c; }

input:checked + .AnySlider:before { -webkit-transform: translateX(15px); -ms-transform: translateX(15px); transform: translateX(15px); }

.AnySlider.round { border-radius: 20px; }

.AnySlider.round:before { border-radius: 50%; }

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

.anySwitchText{ font-size: 16px; font-family: Arial, Helvetica, sans-serif; 

    color: #000; margin-bottom: 30px;}

.anySwitchText .switch { position: relative;

    display: inline-block;

    width: 34px;

    height: 16px;

    margin-bottom: 0;

    margin-right: 10px;

    vertical-align: middle;

    margin-top: -4px;

 }

.anySwitchText .switch input { display: none; }

.AnySliderText { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; 

    bottom: 0; background: #ccc; -webkit-transition: .4s; transition: .4s; }

.AnySliderText:before {position: absolute;

    content: "";

    height: 22px;

    width: 22px;

    left: 0;

    bottom: -3px;

    background: #aaa;

    -webkit-transition: .4s;

    transition: .4s; }

input:checked + .AnySliderText { background: #5740ac; }

input:focus + .AnySliderText { box-shadow: 0 0 1px #5740ac; }

input:checked + .AnySliderText:before { -webkit-transform: translateX(15px); 

    -ms-transform: translateX(15px); transform: translateX(15px); 

    background: #46338c; }

.AnySliderText.round { border-radius: 20px; }

.AnySliderText.round:before { border-radius: 50%; }

</style>

<div class="anySwitchText">

                        <label class="switch">

                          <input type="checkbox" checked> 

                          <span class="AnySliderText round"></span></label> 

                          Check me for Newsletter

                      </div>