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}
6K views
6K 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
102.1K views
2.1K views
2K views
1.8K views
1.4K views
1.3K views
1.3K views
1.3K views
974 views
MIT License