1.button {
2  position: relative;
3  display: flex;
4  align-items: center;
5  justify-content: center;
6  width: 5.3em;
7  height: 5.3em;
8  border: none;
9  border-radius: .4em;
10  background: rgba(235, 252, 254, 0.8);
11}
12
13.container {
14  position: relative;
15  width: 3.5em;
16  height: 3.1em;
17  background: none;
18  overflow: hidden;
19}
20
21.folder {
22  content: '';
23  position: absolute;
24  /* box-shadow: 0 0 5px rgba(0, 0, 0, .3); */
25}
26
27.folder_one {
28  bottom: 0;
29  width: 100%;
30  height: 88%;
31  border-radius: 3px;
32  border-top: 2px solid rgb(206, 167, 39);
33  /* background-color: rgb(252, 212, 80); */
34  background: linear-gradient(
35    -35deg,
36    rgb(238, 194, 47) 5%,
37    rgb(255, 223, 118));
38}
39
40.folder_two {
41  top: 5%;
42  width: 38%;
43  height: 19%;
44  border-top-left-radius: 3px;
45  border-top-right-radius: 3px;
46  border-bottom-right-radius: 3px;
47  background-color: rgb(206, 167, 39);
48  box-shadow: 0 1px 5px -2px rgba(0, 0, 0, .5);
49}
50
51.folder_two::before {
52  content: '';
53  position: absolute;
54  display: inline;
55  left: 88%;
56  width: 0;
57  height: 0;
58  border-left: 7px solid rgb(206, 167, 39);
59  border-top: .3em solid transparent;
60  border-bottom: .3em solid transparent;
61  /* background-color: rgb(206, 167, 39); */
62}
63
64.folder_three {
65  display: flex;
66  align-items: center;
67  justify-content: center;
68  left: .5em;
69  bottom: 0;
70  width: 2.5em;
71  height: .9em;
72  border-radius: 4px 4px 0 0;
73  background: linear-gradient(
74    -35deg,
75    rgb(25, 102, 218),
76    rgb(109, 165, 249));
77  box-shadow: 0 0 5px rgba(0, 0, 0, .4);
78}
79
80.folder_four {
81  left: 1em;
82  bottom: .3em;
83  width: 1.5em;
84  height: .18em;
85  border-radius: 1em;
86  background-color: rgb(20, 77, 163);
87  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
88}
89
90.active_line {
91  content: '';
92  position: absolute;
93  bottom: 0;
94  width: .9em;
95  height: .4em;
96  background-color: #999;
97  border: none;
98  border-radius: 1em;
99  transition: all .15s linear;
100}
101
102.button:active .active_line,
103.button:focus .active_line {
104  width: 2.3em;
105  background-color: rgb(41, 126, 255);
106}
107
108.button:focus .container {
109  animation: wow 1s forwards;
110}
111
112@keyframes wow {
113  20% {
114    scale: .8;
115  }
116
117  30% {
118    scale: 1;
119    transform: translateY(0);
120  }
121
122  50% {
123    transform: translateY(-6px);
124  }
125
126  65% {
127    transform: translateY(4px);
128  }
129
130  80% {
131    transform: translateY(0);
132  }
133
134  100% {
135    scale: 1;
136  }
137}
138
139.text {
140  content: '';
141  position: absolute;
142  top: -4.5em;
143  width: 7.7em;
144  height: 2.6em;
145  background-color: #666;
146  color: #fff;
147  display: flex;
148  justify-content: center;
149  align-items: center;
150  border: none;
151  border-radius: 5px;
152  text-shadow: 0 0 10px rgb(0, 0, 0);
153  opacity: 0;
154  transition: all .25s linear;
155}
156
157.button:hover .text {
158  opacity: 1;
159}