ISO Style Checkbox/Toggle/Button With Pure Css

ISO STYLE CHECKBOX

Assalamo Alaikum  friends in this lesson i'll be giving you a very beautiful  ISO Style Checkbox/Toggle/Button Only With Css Just copy and pate below code hope you like it


HTML CODES


 <label for="label">
    <input id="label" type="checkbox" class="input-checkbox"></input>
    <div class="toggle-green">
    </div>
 </label>

CSS


        input[type="checkbox"]{
            display:none;
        }
       
       .toggle-green{
            margin: 10px 0px;
            width:50px;
            height:25px;
            border-radius:15px;
            border:1px solid #6F6E6E;
            background:#ededed;
            cursor:pointer;
            position: relative;
            transition:.3s cubic-bezier(0.95,0.05,0.795,0.035);
        }

        
        .toggle-green:after{
            transition:.3s cubic-bezier(0.95,0.05,0.795,0.035);
            content:"";
            display:block;
            box-shadow: 1px .8px .1px;
            width:25px;
            height:25px;
            background:white;
            border-radius:50px;
            position:absolute;
            top: 0%;
            left: 0%;
        }
        .input-checkbox:checked + .toggle-green{
            border-color:greenyellow;
            background-color: greenyellow;
        }
        .input-checkbox:checked + .toggle-green:after{
            left: 25px;
        }

Comments