Checkbox by Smit-Prajapati
#e8e8e8
1.checkbox { 2 appearance: none; 3 width: 30px; 4 aspect-ratio: 1; 5 border-radius: 8px; 6 border: 2px solid black; 7 position: relative; 8 transition: all 0.2s ease-in-out; 9} 10 11.checkbox::before { 12 font-family: "Quicksand", sans-serif; 13 position: absolute; 14 bottom: -4px; 15 left: 1px; 16 content: "✔"; 17 font-size: 40px; 18 color: rgb(255, 153, 0); 19 transform: scale(0); 20 transition: all 0.2s ease-in-out; 21} 22 23.checkbox:checked::before { 24 animation: zoom 0.5s ease-in-out; 25 transform: scale(1); 26} 27 28@keyframes zoom { 29 0% { 30 transform: scale(0); 31 } 32 33 20% { 34 transform: scale(1.5); 35 } 36 37 40% { 38 transform: scale(0.5); 39 } 40 41 50% { 42 transform: scale(1); 43 } 44 45 70% { 46 transform: scale(1.2); 47 } 48 49 90% { 50 transform: scale(0.8); 51 } 52 53 100% { 54 transform: scale(1); 55 } 56}
1.2K views
1.2K views
MIT License