Switch by JaydipPrajapati1910
#212121
1#toggle_checkbox { 2 display: none; 3} 4 5label { 6 display: block; 7 position: absolute; 8 top: 50%; 9 right: 0; 10 left: 0; 11 width: 116px; 12 height: 56px; 13 margin: 0 auto; 14 background-color: rgb(7, 189, 128); 15 border: 4px solid rgb(75, 114, 94); 16 border-radius: 56px; 17 transform: translateY(-50%); 18 cursor: pointer; 19 transition: 0.3s ease background-color; 20 overflow: hidden; 21 user-select: none; 22} 23 24.star { 25 position: absolute; 26 top: 5px; 27 left: 13px; 28 width: 30px; 29 height: 30px; 30 font-size: 25px; 31 transform: scale(1); 32 border-radius: 50%; 33 transition: 0.3s ease top, 0.3s ease left, 0.3s ease transform, 0.3s ease background-color; 34 z-index: 1; 35 background-color: none; 36} 37 38.moon { 39 position: absolute; 40 bottom: -52px; 41 right: 15px; 42 width: 30px; 43 height: 30px; 44 font-size: 30px; 45 transition: 0.3s ease bottom; 46} 47 48.moon:before { 49 content: ""; 50 position: absolute; 51 top: -12px; 52 left: -17px; 53 background-color: none; 54 width: 30px; 55 height: 30px; 56 font-size: 30px; 57 transition: 0.2s ease background-color; 58} 59 60#toggle_checkbox:checked + label { 61 background-color: rgb(75, 114, 94); 62 border: 4px solid rgb(7, 189, 128); 63} 64 65#toggle_checkbox:checked + label .star { 66 top: 2px; 67 left: 64px; 68 transform: scale(0.6); 69} 70 71#toggle_checkbox:checked + label .moon { 72 bottom: 14px; 73} 74 75
658 views
658 views
MIT License