Mã HTML
1 2 3 4 |
<input class="switch-checkbox" id="sample-checkbox" type="checkbox" value="true"> <label class="switch-label" for="sample-checkbox"> <i></i> </label> |
Mã SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
label.switch-label { width: 55px; height: 30px; display: inline-block; position: relative; border-radius: 14px; background-clip: padding-box; background: #9e9e9e; line-height: 30px; font-style: normal; color: #fff; font-weight: bold; transition: all 1s ease-in; cursor: pointer; i { position: absolute; top: 2px; right: 26px; width: 26px; height: 26px; display: block; border-radius: 50%; background: #fff; transition: all 200ms ease; } } label.switch-label:active i:before { box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.3); } label.switch-label:before { //content: "NO"; transition: all 200ms ease; float: right; padding-right: 20px; } input.switch-checkbox:checked~label.switch-label:before { // content: "YES"; margin-right: 30px; margin-left: 0; } input.switch-checkbox:checked~label.switch-label { background: rgb(141, 173, 51); } input.switch-checkbox:checked~label.switch-label i { right: 3px; } input.switch-checkbox { display: none; } |
Kết quả như sau
See the Pen jvNQaX by leanh (@leanh) on CodePen.
Ngoài ra các bạn có thể tham khảo ví dụ của tác giả Marcus Burnette
See the Pen All-CSS Toggle Switch (Checkbox Hack) by Marcus Burnette (@mburnette) on CodePen.