Button by Z4drus

1.button-container {
2  display: flex;
3  justify-content: center;
4  margin: 20px;
5}
6
7.material-icons {
8  display: flex;
9  align-items: center;
10  justify-content: center;
11}
12
13.button-text {
14  margin-left: 6px;
15  font-weight: 600;
16  color: black;
17}
18
19.button-3d {
20  -webkit-appearance: none;
21  appearance: none;
22  position: relative;
23  border-width: 0;
24  padding: 0 8px;
25  min-width: 4em;
26  min-height: 4em;
27  box-sizing: border-box;
28  background: transparent;
29  font: inherit;
30  cursor: pointer;
31  margin: 10px;
32  border-radius: 20px;
33}
34
35.button-top {
36  display: flex;
37
38  align-items: center;
39  justify-content: center;
40  position: relative;
41  z-index: 2;
42  padding: 10px 10px;
43  transform: translateY(0);
44  background-image: linear-gradient(to bottom, #e7e7e775, #ffffff);
45  border-radius: 20px;
46  transition: transform 0.3s, border-radius 0.3s, background 10s;
47}
48
49.button-3d:active .button-top {
50  border-radius: 10px 10px 8px 8px / 8px;
51  transform: translateY(2px);
52  background-image: linear-gradient(to bottom, #ffffff, #e7e7e7);
53}
54
55.button-bottom {
56  position: absolute;
57  z-index: 1;
58  bottom: 4px;
59  left: 4px;
60  border-radius: 10px;
61  padding-top: 10px;
62  width: calc(100% - 8px);
63  height: calc(100% - 10px);
64  background-image: linear-gradient(to bottom, #ffffff, #e7e7e7);
65  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
66  transition: border-radius 0.2s, padding-top 0.2s;
67}
68
69.button-3d:active .button-bottom {
70  border-radius: 10px 10px 8px 8px / 8px;
71  padding-top: 0;
72}
73
74.button-3d:active .button-base {
75  border-radius: 10px 10px 8px 8px / 8px;
76}
77