Switch by vinodjangid07
#e8e8e8
1#lock { 2 display: none; 3} 4.lock-label { 5 width: 45px; 6 height: 45px; 7 display: flex; 8 align-items: center; 9 justify-content: center; 10 background-color: rgb(80, 80, 80); 11 border-radius: 15px; 12 cursor: pointer; 13 transition: all 0.3s; 14} 15.lock-wrapper { 16 width: fit-content; 17 height: fit-content; 18 display: flex; 19 flex-direction: column; 20 align-items: center; 21 justify-content: center; 22 transform: rotate(-10deg); 23} 24.shackle { 25 background-color: transparent; 26 height: 9px; 27 width: 14px; 28 border-top-right-radius: 10px; 29 border-top-left-radius: 10px; 30 border-top: 3px solid white; 31 border-left: 3px solid white; 32 border-right: 3px solid white; 33 transition: all 0.3s; 34} 35.lock-body { 36 width: 15px; 37} 38#lock:checked + .lock-label .lock-wrapper .shackle { 39 transform: rotateY(150deg) translateX(3px); 40 transform-origin: right; 41} 42#lock:checked + .lock-label { 43 background-color: rgb(167, 71, 245); 44} 45.lock-label:active { 46 transform: scale(0.9); 47} 48
2K views
2K views
MIT License