// *, *:after, *:before { // // box-sizing: border-box; // } // body { // min-height: 100vh; // display: flex; // align-items: center; // justify-content: center; // } .switchbox { position: relative; input[type="checkbox"] { visibility: hidden; position: absolute; &:checked + label { transform: rotate(0deg); background-color: rgb(18, 207, 127); border-color: rgb(18, 207, 127) !important; &:before { transform: translateX(24px); background-color: #fff; border-color: rgb(18, 207, 127) !important; } } } label { display: flex; width: 50px; height: 25px; border: 3px solid #aaa; border-radius: 99em; position: relative; transition: transform 0.3s ease-in-out; transform-origin: 50% 50%; cursor: pointer; &:before { transition: transform 0.3s ease; transition-delay: 0s; content: ""; display: block; position: absolute; width: 17px; height: 17px; background-color: #aaa; border-radius: 50%; top: 1px; left: 1px; } } }