1/* Hide the default checkbox */
2.container input {
3  position: absolute;
4  opacity: 0;
5  cursor: pointer;
6}
7
8.container {
9  display: flex;
10  justify-content: center;
11  align-items: center;
12  position: relative;
13  cursor: pointer;
14  font-size: 20px;
15  user-select: none;
16  border-radius: 50%;
17  background-color: white;
18}
19
20/* Create a custom checkbox */
21.checkmark {
22  position: relative;
23  top: 0;
24  left: 0;
25  height: 1.3em;
26  width: 1.3em;
27  transition: .3s;
28  transform: scale(0);
29  border-radius: 50%;
30}
31
32/* When the checkbox is checked, add a blue background */
33.container input:checked ~ .checkmark {
34  background-color: #20c580;
35  transform: scale(1);
36}
37
38/* Create the checkmark/indicator (hidden when not checked) */
39.checkmark:after {
40  content: "";
41  position: absolute;
42  display: none;
43}
44
45/* Show the checkmark when checked */
46.container input:checked ~ .checkmark:after {
47  display: block;
48}
49
50.container input:checked ~ .celebrate {
51  display: block;
52}
53
54/* Style the checkmark/indicator */
55.container .checkmark:after {
56  left: 0.45em;
57  top: 0.25em;
58  width: 0.30em;
59  height: 0.5em;
60  border: solid white;
61  border-width: 0 0.15em 0.15em 0;
62  transform: rotate(45deg);
63}
64
65.container .celebrate {
66  position: absolute;
67  transform-origin: center;
68  animation: kfr-celebrate .4s;
69  animation-fill-mode: forwards;
70  display: none;
71  stroke: #20c580;
72}
73
74@keyframes kfr-celebrate {
75  0% {
76    transform: scale(0);
77  }
78
79  50% {
80    opacity: 1;
81  }
82
83  100% {
84    transform: scale(1.2);
85    opacity: 0;
86    display: none;
87  }
88}