Button by simontheonlyone

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