Checkbox by Smit-Prajapati
#212121
1.checkbox { 2 appearance: none; 3 overflow: hidden; 4 min-width: 30px; 5 aspect-ratio: 1/1; 6 border-radius: 30% 70% 70% 30%/30% 30% 70% 70%; 7 border: 2px solid rgb(255, 102, 0); 8 position: relative; 9 transition: all 0.2s ease-in-out; 10} 11 12.checkbox::before { 13 position: absolute; 14 inset: 0; 15 content: ""; 16 font-size: 35px; 17 transition: all 0.2s ease-in-out; 18} 19 20.checkbox:checked { 21 border: 2px solid rgb(255, 212, 59); 22 background: linear-gradient(135deg, rgb(255, 212, 59) 0%, rgb(255, 102, 0) 100%); 23 box-shadow: -5px -5px 30px rgba(255, 212, 59, 1), 5px 5px 30px rgba(255, 102, 0, 1); 24} 25 26.checkbox:checked::before { 27 background: linear-gradient(135deg, rgb(255, 212, 59) 0%, rgb(255, 102, 0) 100%); 28}
1K views
1K views
MIT License