Button by barisdogansutcu

1.button {
2  cursor: pointer;
3  width: 190px;
4  height: 61px;
5  font-size: 17px;
6  font-weight: 700;
7  position: relative;
8  display: grid;
9  place-content: center;
10  box-shadow: inset -8px -8px 8px 0 rgba(174, 174, 192, 0.25),
11    inset 8px 8px 8px 0 #fff, -8px -8px 24px 0 #fff,
12    2px 10px 20px 0 rgba(121, 121, 131, 0.4);
13  border-radius: 12px;
14  border: double 2px transparent;
15  background-image: linear-gradient(white, white),
16    linear-gradient(to top, #7c7d7c, #d9dbd9);
17  background-origin: border-box;
18  background-clip: content-box, border-box;
19  transition: all 0.3s ease;
20}
21
22.button_text {
23  z-index: 2;
24  display: flex;
25  align-items: center;
26  justify-content: center;
27  gap: 10px;
28}
29.button:before {
30  content: "";
31  position: absolute;
32  left: 50%;
33  top: 50%;
34  transform: translate(-50%, -50%);
35  background-color: white;
36  width: calc(100% - 5px);
37  height: calc(100% - 5px);
38  border-radius: 50px;
39  box-shadow: -10px -10px 15px rgba(255, 255, 255, 0.5),
40    10px 10px 15px rgba(70, 70, 70, 0),
41    inset -10px -10px 15px rgba(255, 255, 255, 0.5),
42    inset 10px 10px 15px rgba(70, 70, 70, 0.12);
43}
44.button:active {
45  box-shadow: none;
46  transform: translateY(3px);
47  background-image: linear-gradient(white, white),
48    linear-gradient(to top, #7c7d7c7a, #d9dbd9);
49}
50