Checkbox by ElsayedShamsEldeen
#e8e8e8
1/*------ Settings ------*/ 2.container { 3 --color: #a5a5b0; 4 --size: 30px; 5 display: flex; 6 justify-content: center; 7 align-items: center; 8 position: relative; 9 cursor: pointer; 10 font-size: var(--size); 11 user-select: none; 12 fill: var(--color); 13} 14 15.container .bell-regular { 16 position: absolute; 17 animation: keyframes-fill 0.5s; 18} 19 20.container .bell-solid { 21 position: absolute; 22 display: none; 23 animation: keyframes-fill 0.5s; 24 color: red; 25} 26 27/* ------ On check event ------ */ 28.container input:checked ~ .bell-regular { 29 display: none; 30} 31 32.container input:checked ~ .bell-solid { 33 display: block; 34} 35 36/* ------ Hide the default checkbox ------ */ 37.container input { 38 position: absolute; 39 opacity: 0; 40 cursor: pointer; 41 height: 0; 42 width: 0; 43} 44 45/* ------ Animation ------ */ 46@keyframes keyframes-fill { 47 0% { 48 opacity: 0; 49 } 50 51 25% { 52 transform: rotate(25deg); 53 } 54 55 50% { 56 transform: rotate(-20deg) scale(1.2); 57 } 58 59 75% { 60 transform: rotate(15deg); 61 } 62} 63
252 views
Variation of acheckbox
MIT License