.checkbox{ display: inline-block; } .checkbox input[type=checkbox]{ margin: 0; visibility: hidden; left: 1px; top: 1px; } .checkbox label{ width: 46px; height: 25px; margin: 0; border: 3px solid #214252; border-radius: 100px; cursor: pointer; overflow: hidden; position: relative; transition: 0.5s ease; } .checkbox label:before, .checkbox label:after{ content: ''; background: #184d47; border-radius: 50%; width: 15px; height: 15px; position: absolute; top: 2px; left: 2px; transition: all 0.3s; } .checkbox label:after{ background: #fff; left: auto; right: -100px; } .checkbox input[type=checkbox]:checked+label{ background-color: #184d47; } .checkbox input[type=checkbox]:checked+label:before{ left: -100px; } .checkbox input[type=checkbox]:checked+label:after{ right: 2px; } @media only screen and (max-width:767px){ .checkbox{ margin: 0 0 20px; } }