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