Checkbox by WhiteNervosa

1/* Variation of work by @mrhyddenn for Radios */
2
3
4.check {
5  cursor: pointer;
6  position: relative;
7  margin: auto;
8  width: 18px;
9  height: 18px;
10  -webkit-tap-highlight-color: transparent;
11  transform: translate3d(0, 0, 0);
12}
13
14.check:before {
15  content: "";
16  position: absolute;
17  top: -15px;
18  left: -15px;
19  width: 48px;
20  height: 48px;
21  border-radius: 50%;
22  background: rgba(34, 50, 84, 0.03);
23  opacity: 0;
24  transition: opacity 0.2s ease;
25}
26
27.check svg {
28  position: relative;
29  z-index: 1;
30  fill: none;
31  stroke-linecap: round;
32  stroke-linejoin: round;
33  stroke: #c8ccd4;
34  stroke-width: 1.5;
35  transform: translate3d(0, 0, 0);
36  transition: all 0.2s ease;
37}
38
39.check svg path {
40  stroke-dasharray: 60;
41  stroke-dashoffset: 0;
42}
43
44.check svg polyline {
45  stroke-dasharray: 22;
46  stroke-dashoffset: 66;
47}
48
49.check:hover:before {
50  opacity: 1;
51}
52
53.check:hover svg {
54  stroke: var(--accent-color, #a3e583);
55}
56
57#cbx2:checked + .check svg {
58  stroke: var(--accent-color, #a3e583);
59}
60
61#cbx2:checked + .check svg path {
62  stroke-dashoffset: 60;
63  transition: all 0.3s linear;
64}
65
66#cbx2:checked + .check svg polyline {
67  stroke-dashoffset: 42;
68  transition: all 0.2s linear;
69  transition-delay: 0.15s;
70}