Checkbox by catraco

1.heart-container {
2  --heart-color: rgb(189, 91, 255);
3  position: relative;
4  width: 50px;
5  height: 50px;
6  transition: .3s;
7}
8
9.heart-container .checkbox {
10  position: absolute;
11  width: 100%;
12  height: 100%;
13  opacity: 0;
14  z-index: 20;
15  cursor: pointer;
16}
17
18.heart-container .svg-container {
19  width: 100%;
20  height: 100%;
21  display: flex;
22  justify-content: center;
23  align-items: center;
24}
25
26.heart-container .svg-outline,
27        .heart-container .svg-filled {
28  fill: var(--heart-color);
29  position: absolute;
30}
31
32.heart-container .svg-filled {
33  animation: keyframes-svg-filled 1s;
34  display: none;
35}
36
37.heart-container .svg-celebrate {
38  position: absolute;
39  animation: keyframes-svg-celebrate .5s;
40  animation-fill-mode: forwards;
41  display: none;
42  stroke: var(--heart-color);
43  fill: var(--heart-color);
44  stroke-width: 2px;
45}
46
47.heart-container .checkbox:checked~.svg-container .svg-filled {
48  display: block
49}
50
51.heart-container .checkbox:checked~.svg-container .svg-celebrate {
52  display: block
53}
54
55@keyframes keyframes-svg-filled {
56  0% {
57    transform: scale(0);
58  }
59
60  25% {
61    transform: scale(1.2);
62  }
63
64  50% {
65    transform: scale(1);
66    filter: brightness(1.5);
67  }
68}
69
70@keyframes keyframes-svg-celebrate {
71  0% {
72    transform: scale(0);
73  }
74
75  50% {
76    opacity: 1;
77    filter: brightness(1.5);
78  }
79
80  100% {
81    transform: scale(1.4);
82    opacity: 0;
83    display: none;
84  }
85}