1/* Hide the default checkbox */
2.container input {
3  position: absolute;
4  opacity: 0;
5  cursor: pointer;
6  height: 0;
7  width: 0;
8}
9
10.container {
11  display: block;
12  position: relative;
13  cursor: pointer;
14  font-size: 20px;
15  user-select: none;
16}
17
18.container::before {
19  position: absolute;
20  left: 0;
21  top: 0;
22  content: "";
23  width: 100%;
24  height: 100%;
25  border-radius: 50%;
26  filter: blur(5px);
27  background-color: #b899ff;
28  background-image: radial-gradient(at 6% 13%, hsla(322,81%,60%,1) 0px, transparent 50%),
29radial-gradient(at 9% 59%, hsla(209,65%,71%,1) 0px, transparent 50%),
30radial-gradient(at 39% 16%, hsla(325,93%,79%,1) 0px, transparent 50%);
31}
32
33/* Create a custom checkbox */
34.checkmark {
35  position: relative;
36  top: 0;
37  left: 0;
38  height: 2em;
39  width: 2em;
40  border-radius: 50%;
41  background-color: rgb(255, 255, 255);
42}
43
44/* When the checkbox is checked, add a blue background */
45.container input:checked ~ .checkmark {
46  height: 2em;
47  width: 2em;
48  border-radius: 50%;
49  position: relative;
50}
51
52.container input:checked ~ .checkmark::before {
53  position: absolute;
54  left: 0;
55  top: 0;
56  right: 0;
57  bottom: 0;
58  margin: auto;
59  width: 65%;
60  height: 65%;
61  content: "";
62  border-radius: 50%;
63  background-color: #ff99f0;
64  background-image: radial-gradient(at 86% 29%, hsla(277,65%,76%,1) 0px, transparent 50%),
65  radial-gradient(at 13% 20%, hsla(54,73%,71%,1) 0px, transparent 50%),
66  radial-gradient(at 76% 0%, hsla(145,64%,69%,1) 0px, transparent 50%);
67  animation: animation__checked 600ms normal;
68}
69
70@keyframes animation__checked {
71  0% {
72    opacity: 0;
73    transform: scale(0.8);
74  }
75
76  100% {
77    opacity: 100;
78    transform: scale(1);
79  }
80}