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: #000;
27  text-decoration: none;
28  font-weight: 100;
29  border-bottom: 1px solid #000;
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(--white);
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(--af-white);
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.circle svg image {
72  filter: brightness(50%);
73}
74
75.sub-circle {
76  z-index: 0;
77  position: absolute;
78  height: 40px;
79  width: 40px;
80  overflow: hidden;
81  border-radius: 50%;
82  transition: 0.3s;
83  transform: scale(0.5);
84  opacity: 0;
85  padding: 0;
86  margin: 0;
87  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
88  border: none;
89}
90
91.sub-circle label {
92  background-color: var(--af-white);
93  display: block;
94  color: white;
95  width: 100%;
96  height: 100%;
97  line-height: 40px;
98  transition: .5s;
99}
100
101.sub-circle label:hover {
102  cursor: pointer;
103  background-color: var(--ch-white);
104}
105
106.subs {
107  left: -20px;
108  top: -50px;
109  width: 40px;
110  height: 40px;
111  text-align: center;
112  z-index: 0;
113  margin: 0 auto;
114  position: relative;
115}
116
117.hidden-sub-trigger {
118  display: none;
119}
120
121.hidden-sub-trigger:checked ~ label {
122  background-color: var(--white);
123}
124
125.hidden-trigger {
126  display: none;
127}
128
129.hidden-trigger:checked ~ .circle {
130  transform: scale(0.9);
131  cursor: pointer;
132  background-color: var(--white);
133  box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.1);
134}
135
136.hidden-trigger:checked ~ .circle .svg {
137  transform: rotate(45deg);
138}
139
140.hidden-trigger:checked ~ .subs button:nth-of-type(1) {
141  transform: translate(0px, -100px) scale(1);
142  opacity: 1;
143  transition: 0.1s;
144}
145
146.hidden-trigger:checked ~ .subs button:nth-of-type(2) {
147  transform: translate(75px, -75px) scale(1);
148  opacity: 1;
149  transition: 0.2s;
150}
151
152.hidden-trigger:checked ~ .subs button:nth-of-type(3) {
153  transform: translate(100px, 0px) scale(1);
154  opacity: 1;
155  transition: 0.3s;
156}
157
158.hidden-trigger:checked ~ .subs button:nth-of-type(4) {
159  transform: translate(75px, 75px) scale(1);
160  opacity: 1;
161  transition: 0.4s;
162}
163
164.hidden-trigger:checked ~ .subs button:nth-of-type(5) {
165  transform: translate(0px, 100px) scale(1);
166  opacity: 1;
167  transition: 0.5s;
168}
169
170.hidden-trigger:checked ~ .subs button:nth-of-type(6) {
171  transform: translate(-75px, 75px) scale(1);
172  opacity: 1;
173  transition: 0.6s;
174}
175
176.hidden-trigger:checked ~ .subs button:nth-of-type(7) {
177  transform: translate(-100px, 0px) scale(1);
178  opacity: 1;
179  transition: 0.7s;
180}
181
182.hidden-trigger:checked ~ .subs button:nth-of-type(8) {
183  transform: translate(-75px, -75px) scale(1);
184  opacity: 1;
185  transition: 0.8s;
186}
187