1.container input {
2  position: absolute;
3  opacity: 0;
4  cursor: pointer;
5  height: 0;
6  width: 0;
7}
8
9.container {
10  display: block;
11  position: relative;
12  cursor: pointer;
13  font-size: 20px;
14  user-select: none;
15  transition: 100ms;
16}
17
18.checkmark {
19  top: 0;
20  left: 0;
21  height: 2em;
22  width: 2em;
23  transition: 100ms;
24  animation: dislike_effect 400ms ease;
25}
26
27.container input:checked ~ .checkmark path {
28  fill: #FF5353;
29  stroke-width: 0;
30}
31
32.container input:checked ~ .checkmark {
33  animation: like_effect 400ms ease;
34}
35
36.container:hover {
37  transform: scale(1.1);
38}
39
40@keyframes like_effect {
41  0% {
42    transform: scale(0);
43  }
44
45  50% {
46    transform: scale(1.2);
47  }
48
49  100% {
50    transform: scale(1);
51  }
52}
53
54@keyframes dislike_effect {
55  0% {
56    transform: scale(0);
57  }
58
59  50% {
60    transform: scale(1.2);
61  }
62
63  100% {
64    transform: scale(1);
65  }
66}