Button by Z4drus

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