Button by Na3ar-17

1.container {
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5  display: flex;
6  justify-content: center;
7  align-items: center;
8}
9
10.container * {
11  border: none;
12  outline: none;
13}
14
15.button {
16  display: flex;
17  align-items: center;
18  position: relative;
19  justify-content: end;
20  cursor: pointer;
21  width: 200px;
22  height: 65px;
23  border-radius: 13px;
24  font-size: 18px;
25  font-weight: 500;
26  background-color: #f9fbf9;
27  border: 3px solid #b7b8b7;
28  -webkit-box-shadow: 0px 10px 24px 0px rgba(214, 215, 214, 1);
29  -moz-box-shadow: 0px 10px 24px 0px rgba(214, 215, 214, 1);
30  box-shadow: 0px 10px 24px 0px rgba(214, 215, 214, 1);
31  overflow: hidden;
32  padding: 0px 13px;
33  border-top-color: #d3d3d3;
34  border-bottom-color: #7e7f7e;
35  transition: all 0.3s ease;
36}
37
38.button .icon {
39  aspect-ratio: 1/1;
40  width: 25px;
41  z-index: 10;
42  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
43  position: absolute;
44  top: 50%;
45  transform: translate(-50%, -50%);
46  left: 30px;
47}
48
49.button .text {
50  z-index: 10;
51  font-weight: 600;
52  display: flex;
53  align-items: center;
54}
55.button .text .tab {
56  margin: 0px 2px;
57}
58.button .text span {
59  transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
60}
61
62.button::before {
63  content: "";
64  position: absolute;
65  top: 50%;
66  left: 50%;
67  transform: translate(-50%, -50%);
68  width: 190px;
69  height: 52px;
70  background-color: #fff;
71  border-radius: 50px;
72  -webkit-box-shadow: inset 0px 10px 50px -40px rgba(66, 68, 90, 1);
73  -moz-box-shadow: inset 0px 10px 50px -40px rgba(66, 68, 90, 1);
74  box-shadow: inset 0px 10px 50px -40px rgba(66, 68, 90, 1);
75  transition: all 0.3s ease;
76}
77
78.button:hover::before {
79  width: 200px;
80  height: 64px;
81  border-radius: 13px;
82  -webkit-box-shadow: inset 0px -10px 50px -40px rgba(66, 68, 90, 1);
83  -moz-box-shadow: inset 0px -10px 50px -40px rgba(66, 68, 90, 1);
84  box-shadow: inset 0px -10px 50px -40px rgba(66, 68, 90, 1);
85}
86
87.button:hover .text span {
88  transform: translateY(80px);
89  opacity: 0;
90}
91
92.button:hover .icon {
93  width: 35px;
94  top: 50%;
95  left: 50%;
96  transform: translate(-50%, -50%) rotate(45deg);
97}
98
99.button:active {
100  transform: translateY(5px);
101}
102