Button by Yaya12085

1.button {
2  --radius: 20px;
3  --white: #ffffff;
4  --white50: #ffffff80;
5  --white35: #ffffff59;
6  --second_white: #f8f8f8;
7  --second_white75: #f8f8f8bf;
8  --third_white: #fafbfb;
9  --gray: #cacaca;
10  --gray50: #cacaca80;
11  --black: #1c1c1c;
12  --black15: #1c1c1c26;
13  --black13: #1c1c1c21;
14  --black10: #1c1c1c1a;
15  --black5: #1c1c1c0d;
16  --black35: #1c1c1c59;
17  --black75: #1c1c1cbf;
18  --black50: #1c1c1c80;
19  position: relative;
20  width: 250px;
21  height: 80px;
22  border-radius: var(--radius);
23  background-color: var(--white);
24  background: linear-gradient(var(--white) 100%, var(--gray) 50%);
25  cursor: pointer;
26  outline: none;
27  border: none;
28  display: flex;
29  align-items: center;
30  justify-content: center;
31  gap: 6px;
32  transition: all 0.3s;
33}
34.icon {
35  position: relative;
36  left: 0;
37  display: flex;
38  align-items: center;
39  justify-content: center;
40  transform: rotate(-45deg);
41  transition: all 0.3s;
42}
43.icon #paper-plane {
44  height: 24px;
45  width: 24px;
46  fill: var(--black);
47  filter: drop-shadow(0 1px 1px var(--black35));
48}
49
50.title {
51  filter: drop-shadow(0 1px 1px var(--black35));
52  font-size: 20px;
53  color: var(--black);
54  font-weight: 600;
55  transition: all 0.3s;
56}
57
58.button::after,
59.button::before {
60  position: absolute;
61  content: "";
62  left: 50%;
63  top: 50%;
64  transform: translate(-50%, -50%);
65  transition: all 0.3s;
66}
67.button::before {
68  background-color: var(--white);
69  box-shadow: inset 10px 10px 15px var(--gray50),
70    inset -10px -10px 15px var(--white), 0 0 0 2px var(--white);
71  width: 90%;
72  height: 80%;
73  border-radius: calc(var(--radius) * 10);
74}
75.button::after {
76  filter: drop-shadow(0 2px 4px var(--black15)),
77    drop-shadow(0 30px 100px var(--black13)),
78    drop-shadow(0 15px 30px var(--black10)),
79    drop-shadow(0 16px 12px var(--black5));
80  box-shadow: 0 0 0 1px var(--white);
81  background-color: var(--black);
82  background: linear-gradient(0deg, var(--black50), var(--gray));
83  width: 102%;
84  height: 108%;
85  border-radius: calc(var(--radius) + 2px);
86  z-index: -1;
87  transition: all 0.1s;
88}
89
90.button:hover::after {
91  width: 101%;
92  height: 104%;
93  filter: none;
94}
95.button:active::after {
96  width: 100%;
97  height: 100%;
98  filter: none;
99}
100.button:hover .icon {
101  transform: rotate(0) translateX(50%);
102  left: calc(50% + 24px);
103}
104.button:hover .title {
105  transform: translateX(-24px);
106}
107