Switch by Na3ar-17
#212121
1.container { 2 padding: 0; 3 margin: 0; 4 box-sizing: border-box; 5 font-family: Arial, Helvetica, sans-serif; 6 display: flex; 7 justify-content: center; 8 align-items: center; 9} 10 11.label { 12 background-color: transparent; 13 border: 2px solid rgb(91, 91, 240); 14 display: flex; 15 align-items: center; 16 border-radius: 50px; 17 width: 150px; 18 cursor: pointer; 19 transition: all 0.4s ease; 20 padding: 5px; 21 position: relative; 22} 23 24.label::before { 25 content: ""; 26 position: absolute; 27 top: 0; 28 bottom: 0; 29 left: 0; 30 right: 0; 31 background-color: #fff; 32 width: 8px; 33 height: 8px; 34 transition: all 0.4s ease; 35 border-radius: 100%; 36 margin: auto; 37 opacity: 0; 38 visibility: hidden; 39} 40 41.label .input { 42 display: none; 43} 44 45.label .title { 46 font-size: 17px; 47 color: #fff; 48 transition: all 0.4s ease; 49 position: absolute; 50 right: 15px; 51 bottom: 14px; 52 text-align: center; 53} 54 55.label .title:last-child { 56 opacity: 0; 57 visibility: hidden; 58} 59 60.label .circle { 61 height: 45px; 62 width: 45px; 63 border-radius: 50%; 64 background-color: rgb(91, 91, 240); 65 display: flex; 66 justify-content: center; 67 align-items: center; 68 transition: all 0.4s ease; 69 position: relative; 70 box-shadow: 0 0 0 0 rgb(255, 255, 255); 71 overflow: hidden; 72} 73 74.label .circle .icon { 75 color: #fff; 76 width: 30px; 77 position: absolute; 78 top: 50%; 79 left: 50%; 80 transform: translate(-50%, -50%); 81 transition: all 0.4s ease; 82} 83 84.label .circle .square { 85 aspect-ratio: 1; 86 width: 15px; 87 border-radius: 2px; 88 background-color: #fff; 89 opacity: 0; 90 visibility: hidden; 91 position: absolute; 92 top: 50%; 93 left: 50%; 94 transform: translate(-50%, -50%); 95 transition: all 0.4s ease; 96} 97 98.label .circle::before { 99 content: ""; 100 position: absolute; 101 left: 0; 102 top: 0; 103 background-color: #3333a8; 104 width: 100%; 105 height: 0; 106 transition: all 0.4s ease; 107} 108 109.label:has(.input:checked) { 110 width: 57px; 111 animation: installed 0.4s ease 3.5s forwards; 112} 113 114.label:has(.input:checked)::before { 115 animation: rotate 3s ease-in-out 0.4s forwards; 116} 117 118.label .input:checked + .circle { 119 animation: pulse 1s forwards, circleDelete 0.2s ease 3.5s forwards; 120 rotate: 180deg; 121} 122 123.label .input:checked + .circle::before { 124 animation: installing 3s ease-in-out forwards; 125} 126 127.label .input:checked + .circle .icon { 128 opacity: 0; 129 visibility: hidden; 130} 131 132.label .input:checked ~ .circle .square { 133 opacity: 1; 134 visibility: visible; 135} 136 137.label .input:checked ~ .title { 138 opacity: 0; 139 visibility: hidden; 140} 141 142.label .input:checked ~ .title:last-child { 143 animation: showInstalledMessage 0.4s ease 3.5s forwards; 144} 145 146@keyframes pulse { 147 0% { 148 scale: 0.95; 149 box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); 150 } 151 70% { 152 scale: 1; 153 box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); 154 } 155 100% { 156 scale: 0.95; 157 box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); 158 } 159} 160 161@keyframes installing { 162 from { 163 height: 0; 164 } 165 to { 166 height: 100%; 167 } 168} 169 170@keyframes rotate { 171 0% { 172 transform: rotate(-90deg) translate(27px) rotate(0); 173 opacity: 1; 174 visibility: visible; 175 } 176 99% { 177 transform: rotate(270deg) translate(27px) rotate(270deg); 178 opacity: 1; 179 visibility: visible; 180 } 181 100% { 182 opacity: 0; 183 visibility: hidden; 184 } 185} 186 187@keyframes installed { 188 100% { 189 width: 150px; 190 border-color: rgb(35, 174, 35); 191 } 192} 193 194@keyframes circleDelete { 195 100% { 196 opacity: 0; 197 visibility: hidden; 198 } 199} 200 201@keyframes showInstalledMessage { 202 100% { 203 opacity: 1; 204 visibility: visible; 205 right: 56px; 206 } 207} 208
468 views
468 views
MIT License