Trang chủ
Checkbox v2
Save
Settings
Sign Up
Log In
Save
Settings
HTML
Copy
<label class="tg"> <input type="checkbox" id="tgi" class="tgi" /> <div class="tgb"> <div class="tgs"></div> </div> </label>
CSS
Copy
.tg { cursor: pointer; } .tgi { display: none; } .tgi:checked + .tgb { background-color: #1dc071; } .tgi:checked + .tgb .tgs { transform: translateX(50px); } .tgb { width: 100px; height: 50px; background-color: #cbd5e1; border-radius: 5rem; padding: 5px; transition: background-color 0.2s linear; } .tgs { width: 40px; height: 40px; border-radius: 100rem; background-color: #fff; transition: transform 0.2s linear; }
JS
Copy