#212121
1.checkbox-wrapper-41 { 2 --size: 100px; 3} 4 5.checkbox-wrapper-41 input[type="checkbox"] { 6 -webkit-appearance: none; 7 width: var(--size); 8 height: calc(var(--size) / 2); 9 background-color: #fff; 10 border: 3px solid #222; 11 border-radius: 30px 100px 100px 100px; 12 box-shadow: 0 10px 20px rgba(0,0,0,0.2); 13 outline: none; 14 cursor: pointer; 15 position: relative; 16 transition: all 0.5s; 17} 18 19.checkbox-wrapper-41 input[type="checkbox"]::before { 20 content: ""; 21 position: absolute; 22 width: calc(var(--size) / 2); 23 height: calc(var(--size) / 2); 24 left: 0; 25 top: 50%; 26 transform: translateY(-50%) scale(0.7); 27 border: 3px solid #222; 28 border-radius: 30px 100px 100px 100px; 29 background-color: #fde881; 30 box-sizing: border-box; 31 transition: all 0.5s; 32} 33 34.checkbox-wrapper-41 input[type="checkbox"]:checked { 35 background-color: #fde881; 36 border-radius: 100px 100px 30px 100px; 37} 38 39.checkbox-wrapper-41 input[type="checkbox"]:checked::before { 40 left: 50%; 41 background-color: #fff; 42 border-radius: 100px 100px 30px 100px; 43}
2.5K views
2.5K views
Comments
MIT License