Checkbox by catraco
#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 .5s; 18} 19 20.container .bell-solid { 21 position: absolute; 22 display: none; 23 animation: keyframes-fill .5s; 24} 25 26/* ------ On check event ------ */ 27.container input:checked ~ .bell-regular { 28 display: none; 29} 30 31.container input:checked ~ .bell-solid { 32 display: block; 33} 34 35/* ------ Hide the default checkbox ------ */ 36.container input { 37 position: absolute; 38 opacity: 0; 39 cursor: pointer; 40 height: 0; 41 width: 0; 42} 43 44/* ------ Animation ------ */ 45@keyframes keyframes-fill { 46 0% { 47 opacity: 0; 48 } 49 50 25% { 51 transform: rotate(25deg); 52 } 53 54 50% { 55 transform: rotate(-20deg) scale(1.2); 56 } 57 58 75% { 59 transform: rotate(15deg); 60 } 61}
5.7K views
5.7K views
adamgiebl
Pro+
13. August 2023. at 20:0913. August 2023. at 20:09
Great collection!
catraco 19. August 2023. at 0:21
19. August 2023. at 0:21
@adamgiebl There is 15 variations and just 10 appear, is this the maximum number?
Variations
102K views
1.7K views
1.6K views
1.5K views
1.3K views
1.3K views
1.2K views
1.2K views
924 views
MIT License