1.button {
2  display: flex;
3  flex-direction: column;
4  align-items: flex-end;
5  justify-content: space-between;
6  background-color: #000;
7  color: #fff;
8  font-size: 13px;
9  border: 0.5px solid rgba(0, 0, 0, 0.1);
10  padding-bottom: 8px;
11  height: 65px;
12  padding: 12px;
13  border-radius: 15px 15px 12px 12px;
14  cursor: pointer;
15  position: relative;
16  will-change: transform;
17  transition: all .1s ease-in-out 0s;
18  user-select: none;
19  /* Add gradient shading to each side */
20  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),
21    linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
22  background-position: bottom right, bottom right;
23  background-size: 100% 100%, 100% 100%;
24  background-repeat: no-repeat;
25  box-shadow: inset -4px -10px 0px rgba(255, 255, 255, 0.4),
26    inset -4px -8px 0px rgba(0, 0, 0, 0.3),
27    0px 2px 1px rgba(0, 0, 0, 0.3),
28    0px 2px 1px rgba(255, 255, 255, 0.1);
29  transform: perspective(70px) rotateX(5deg) rotateY(0deg);
30}
31
32.button::after {
33  content: '';
34  position: absolute;
35  top: 0;
36  bottom: 0;
37  left: 0;
38  right: 0;
39  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.5));
40  z-index: -1;
41  border-radius: 15px;
42  box-shadow: inset 4px 0px 0px rgba(255, 255, 255, 0.1),
43    inset 4px -8px 0px rgba(0, 0, 0, 0.3);
44  transition: all .1s ease-in-out 0s;
45}
46
47.button::before {
48  content: '';
49  position: absolute;
50  top: 0;
51  bottom: 0;
52  left: 0;
53  right: 0;
54  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),
55    linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
56  background-position: bottom right, bottom right;
57  background-size: 100% 100%, 100% 100%;
58  background-repeat: no-repeat;
59  z-index: -1;
60  border-radius: 15px;
61  transition: all .1s ease-in-out 0s;
62}
63
64.button:active {
65  will-change: transform;
66  transform: perspective(80px) rotateX(5deg) rotateY(1deg) translateY(3px) scale(0.96);
67  height: 64px;
68  border: 0.25px solid rgba(0, 0, 0, 0.2);
69  box-shadow: inset -4px -8px 0px rgba(255, 255, 255, 0.2),
70    inset -4px -6px 0px rgba(0, 0, 0, 0.8),
71    0px 1px 0px rgba(0, 0, 0, 0.9),
72    0px 1px 0px rgba(255, 255, 255, 0.2);
73  transition: all .1s ease-in-out 0s;
74}
75
76.button::after:active {
77  background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.2));
78}
79
80.button:active::before {
81  content: "";
82  display: block;
83  position: absolute;
84  top: 5%;
85  left: 20%;
86  width: 50%;
87  height: 80%;
88  background-color: rgba(255, 255, 255, 0.1);
89  animation: overlay 0.1s ease-in-out 0s;
90  pointer-events: none;
91}
92
93.button svg {
94  width: 15px;
95  height: 15px;
96}
97
98@keyframes overlay {
99  from {
100    opacity: 0;
101  }
102
103  to {
104    opacity: 1;
105  }
106}
107
108.button:focus {
109  outline: none;
110}