Switch by guilhermeyohan
#e8e8e8
1#toggle_checkbox { 2 display: none; 3} 4 5label { 6 position: absolute; 7 top: 50%; 8 right: 0; 9 left: 0; 10 display: block; 11 width: 70px; 12 height: 30px; 13 margin: 0 auto; 14 transform: translateY(-50%); 15 cursor: pointer; 16} 17 18label:before { 19 top: 2px; 20 left: 3px; 21 width: 26px; 22 height: 26px; 23 border: 3px solid rgb(2, 169, 38); 24} 25 26label:after { 27 top: 0; 28 right: 0; 29 width: 70px; 30 height: 30px; 31 border: 3px solid #103445; 32} 33 34label:before, label:after { 35 content: ""; 36 position: absolute; 37 border-radius: 50px; 38 box-sizing: border-box; 39 transition: 0.5s ease top, 0.5s ease left, 0.5s ease right, 0.5s ease width, 0.5s ease height, 0.5s ease border-color; 40} 41 42#toggle_checkbox:checked + label:before { 43 top: 0; 44 left: 0; 45 width: 70px; 46 height: 30px; 47 border-color: #143240; 48} 49 50#toggle_checkbox:checked + label:after { 51 top: 2px; 52 right: 3px; 53 width: 26px; 54 height: 26px; 55 border-color: red; 56}
763 views
763 views
MIT License