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: 25px;
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_401 400ms ease;
25}
26
27.container input:checked ~ .checkmark path {
28  fill: #1C7DFF;
29  stroke-width: 1.2;
30  stroke: #212121;
31 /*same background color*/
32}
33
34.container input:checked ~ .checkmark {
35  animation: like_401 400ms ease;
36}
37
38.container:hover {
39  transform: scale(1.1);
40}
41
42@keyframes like_401 {
43  0% {
44    transform: scale(0);
45  }
46
47  50% {
48    transform: scale(1.2);
49  }
50
51  100% {
52    transform: scale(1);
53  }
54}
55
56@keyframes dislike_401 {
57  0% {
58    transform: scale(0);
59  }
60
61  50% {
62    transform: scale(1.2);
63  }
64
65  100% {
66    transform: scale(1);
67  }
68}