Checkbox by KhoroshN

1.wrapper {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  transform: translate(-50%, -50%);
6  width: 60px;
7  height: 60px;
8  --black: #618618;
9  --ch-black: #141414;
10  --eer-black: #216216;
11  --night-rider: #272727;
12  --white: #282828;
13  --af-white: #cccccc;
14  --ch-white: #575757;
15}
16
17footer .demo {
18  position: absolute;
19  bottom: 10px;
20  width: 500px;
21  margin: 0 auto;
22}
23
24footer .demo a {
25  text-align: center;
26  color: var(--black);
27  text-decoration: none;
28  font-weight: 100;
29  border-bottom: 1px solid var(--black);
30}
31
32.circle {
33  display: block;
34  position: relative;
35  padding: 0;
36  z-index: 98;
37  margin: 0 auto;
38  -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
39  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
40  border-radius: 50%;
41  height: 60px;
42  width: 60px;
43  background-color: var(--night-rider);
44  transition: 0.2s;
45  text-align: center;
46}
47
48.circle:active {
49  transform: scale(0.9);
50  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.3);
51}
52
53.circle:hover {
54  cursor: pointer;
55  background-color: var(--night-rider);
56  box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.3);
57}
58
59.circle .svg {
60  position: absolute;
61  top: 50%;
62  left: 50%;
63  margin-left: -16px;
64  margin-top: -16px;
65  width: 32px;
66  height: 32px;
67  transition: 0.5s;
68  transform: rotate(180deg);
69}
70
71.sub-circle {
72  z-index: 0;
73  position: absolute;
74  height: 40px;
75  width: 40px;
76  overflow: hidden;
77  border-radius: 50%;
78  transition: 0.3s;
79  transform: scale(0.5);
80  opacity: 0;
81  padding: 0;
82  margin: 0;
83  box-shadow: 0 8px 13px 0 rgba(0, 0, 0, 0.51);
84  border: dotted 3.12px #212121;
85  user-select: none;
86}
87
88.sub-circle label {
89  background-color: var(--eer-black);
90  display: block;
91  color: var(--eer-black);
92  width: 100%;
93  height: 100%;
94  line-height: 40px;
95  transition: 0.5s;
96}
97
98.sub-circle label:hover {
99  cursor: pointer;
100  background-color: var(--eer-black);
101}
102
103.subs {
104  left: -20px;
105  top: -50px;
106  width: 40px;
107  height: 40px;
108  text-align: center;
109  z-index: 0;
110  margin: 0 auto;
111  position: relative;
112}
113
114.hidden-sub-trigger {
115  display: none;
116}
117
118.hidden-sub-trigger:checked ~ label {
119  background-color: var(--black);
120}
121
122.hidden-trigger {
123  display: none;
124}
125
126.hidden-trigger:checked ~ .circle {
127  transform: scale(0.75);
128  cursor: pointer;
129  background-color: var(--black);
130  box-shadow: 0px 8px 13px 0px rgba(0, 0, 0, 0.51);
131}
132
133.hidden-trigger:checked ~ .circle .svg {
134  transform: rotate(-315deg);
135}
136
137.hidden-trigger:checked ~ .subs button:nth-of-type(1) {
138  transform: translate(-40px, -69.28px) scale(1);
139  opacity: 1;
140  transition: 0.1s;
141}
142
143.hidden-trigger:checked ~ .subs button:nth-of-type(2) {
144  transform: translate(40px, -69.28px) scale(1);
145  opacity: 1;
146  transition: 0.2s;
147}
148
149.hidden-trigger:checked ~ .subs button:nth-of-type(3) {
150  transform: translate(80px, 0px) scale(1);
151  opacity: 1;
152  transition: 0.3s;
153}
154
155.hidden-trigger:checked ~ .subs button:nth-of-type(4) {
156  transform: translate(-40px, 69.28px) scale(1);
157  opacity: 1;
158  transition: 0.4s;
159}
160
161.hidden-trigger:checked ~ .subs button:nth-of-type(5) {
162  transform: translate(40px, 69.28px) scale(1);
163  opacity: 1;
164  transition: 0.5s;
165}
166
167.hidden-trigger:checked ~ .subs button:nth-of-type(6) {
168  transform: translate(-80px, 0px) scale(1);
169  opacity: 1;
170  transition: 0.6s;
171}
172