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