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 .save-regular { 16 position: absolute; 17 animation: keyframes-fill .5s; 18 transform-origin: top; 19} 20 21.container .save-solid { 22 position: absolute; 23 animation: keyframes-fill .5s; 24 display: none; 25 transform-origin: top; 26} 27 28/* ------ On check event ------ */ 29.container input:checked ~ .save-regular { 30 display: none; 31} 32 33.container input:checked ~ .save-solid { 34 display: block; 35} 36 37/* ------ Hide the default checkbox ------ */ 38.container input { 39 position: absolute; 40 opacity: 0; 41 cursor: pointer; 42 height: 0; 43 width: 0; 44} 45 46/* ------ Animation ------ */ 47@keyframes keyframes-fill { 48 0% { 49 transform: scale(0); 50 opacity: 0; 51 } 52 53 50% { 54 transform: scaleY(1.2); 55 } 56}
922 views
Variation of acheckbox
MIT License