This post is saved as a draft.
#e8e8e8
1#checkboxInput { 2 display: none; 3} 4.bookmark { 5 cursor: pointer; 6 background-color: teal; 7 width: 45px; 8 height: 45px; 9 display: flex; 10 align-items: center; 11 justify-content: center; 12 border-radius: 10px; 13} 14.svgIcon path { 15 stroke-dasharray: 200 0; 16 stroke-dashoffset: 0; 17 stroke: white; 18 fill: #dddddd00; 19 transition-delay: 0s; 20 transition-duration: 0.5s; 21} 22 23#checkboxInput:checked ~ .svgIcon path { 24 fill: white; 25 animation: bookmark 0.5s linear; 26 transition-delay: 0.5s; 27} 28 29@keyframes bookmark { 30 0% { 31 stroke-dasharray: 0 200; 32 stroke-dashoffset: 80; 33 } 34 100% { 35 stroke-dasharray: 200 0; 36 } 37} 38
Variation of aswitch
Variation of aswitch