Checkbox by kennyotsu-monochromia

1.wrapper {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  transform: translate(-50%, -50%);
6  width: 60px;
7  height: 60px;
8  --black: #000000;
9  --ch-black: #141414;
10  --eer-black: #1b1b1b;
11  --night-rider: #2e2e2e;
12  --white: #ffffff;
13  --af-white: #f3f3f3;
14  --ch-white: #e1e1e1;
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: -15px;
64  margin-top: -15px;
65  width: 30px;
66  height: 30px;
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 6px 10px 0 rgba(0, 0, 0, 0.3);
84  border: none;
85}
86
87.sub-circle label {
88  background-color: var(--eer-black);
89  display: block;
90  color: var(--eer-black);
91  width: 100%;
92  height: 100%;
93  line-height: 40px;
94  transition: .5s;
95}
96
97.sub-circle label:hover {
98  cursor: pointer;
99  background-color: var(--eer-black);
100}
101
102.subs {
103  left: -20px;
104  top: -50px;
105  width: 40px;
106  height: 40px;
107  text-align: center;
108  z-index: 0;
109  margin: 0 auto;
110  position: relative;
111}
112
113.hidden-sub-trigger {
114  display: none;
115}
116
117.hidden-sub-trigger:checked ~ label {
118  background-color: var(--black);
119}
120
121.hidden-trigger {
122  display: none;
123}
124
125.hidden-trigger:checked ~ .circle {
126  transform: scale(0.9);
127  cursor: pointer;
128  background-color: var(--black);
129  box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.1);
130}
131
132.hidden-trigger:checked ~ .circle .svg {
133  transform: rotate(45deg);
134}
135
136.hidden-trigger:checked ~ .subs button:nth-of-type(1) {
137  transform: translate(0px, -100px) scale(1);
138  opacity: 1;
139  transition: 0.1s;
140}
141
142.hidden-trigger:checked ~ .subs button:nth-of-type(2) {
143  transform: translate(75px, -75px) scale(1);
144  opacity: 1;
145  transition: 0.2s;
146}
147
148.hidden-trigger:checked ~ .subs button:nth-of-type(3) {
149  transform: translate(100px, 0px) scale(1);
150  opacity: 1;
151  transition: 0.3s;
152}
153
154.hidden-trigger:checked ~ .subs button:nth-of-type(4) {
155  transform: translate(75px, 75px) scale(1);
156  opacity: 1;
157  transition: 0.4s;
158}
159
160.hidden-trigger:checked ~ .subs button:nth-of-type(5) {
161  transform: translate(0px, 100px) scale(1);
162  opacity: 1;
163  transition: 0.5s;
164}
165
166.hidden-trigger:checked ~ .subs button:nth-of-type(6) {
167  transform: translate(-75px, 75px) scale(1);
168  opacity: 1;
169  transition: 0.6s;
170}
171
172.hidden-trigger:checked ~ .subs button:nth-of-type(7) {
173  transform: translate(-100px, 0px) scale(1);
174  opacity: 1;
175  transition: 0.7s;
176}
177
178.hidden-trigger:checked ~ .subs button:nth-of-type(8) {
179  transform: translate(-75px, -75px) scale(1);
180  opacity: 1;
181  transition: 0.8s;
182}
183