.checkbox{ background: #333; width: 65px; height: 30px; border-radius: 50px; margin: 0 auto; position: relative; } .checkbox:after{ content: ''; background: #111; height: 2px; width: 37px; border-radius: 50px; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2); position: absolute; top: 14px; left: 14px; } .checkbox label{ background: #111; width: 22px; height: 22px; padding: 0; border: 6px solid #fff; border-radius: 50%; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 1) inset; cursor: pointer; display: block; position: absolute; top: 4px; left: 4px; z-index: 1; transition: all 0.4s ease 0s; } .checkbox input[type=checkbox]{ margin: 0; visibility: hidden; } .checkbox input[type=checkbox]:checked+label{ left: 39px; } .checkbox input[type=checkbox]:checked+label{ background: #4cd137; } @media only screen and (max-width:767px){ .checkbox{ margin: 0 0 20px; } }