1.bookmark {
2  position: relative;
3  cursor: pointer;
4  display: flex;
5  align-items: center;
6  justify-content: center;
7}
8
9#checkboxInput {
10  display: none;
11}
12
13.svgIcon {
14  height: 30px;
15}
16
17.svgIcon path {
18  fill: rgb(153, 153, 153);
19}
20
21.bookmark::before {
22  content: "\002B";
23  position: absolute;
24  color: rgb(255, 255, 255);
25  font-size: 1.2em;
26  top: 1px;
27}
28
29#checkboxInput:checked + .bookmark::before {
30  content: "\2713";
31  font-size: 0.70em;
32  top: 5px;
33}
34
35#checkboxInput:checked + .bookmark .svgIcon path {
36  fill: rgb(121, 199, 3);
37}
38
39#checkboxInput:active + .bookmark .svgIcon path {
40  fill: rgb(204, 204, 204);
41}
42
43.bookmark::after {
44  content: "";
45  background-color: rgba(56, 105, 0, 0.342);
46  position: absolute;
47  width: 8px;
48  height: 8px;
49  border-radius: 50%;
50  z-index: -1;
51}
52
53#checkboxInput:checked + .bookmark::after {
54  animation: puff-out-center .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
55}
56
57@keyframes puff-out-center {
58  0% {
59    transform: scale(1);
60    filter: blur(0px);
61    opacity: 1;
62  }
63
64  100% {
65    transform: scale(9);
66    filter: blur(1px);
67    opacity: 0;
68  }
69}
70