Button by vladaxnt

1.icon,
2.button {
3  transition: box-shadow 0.3s cubic-bezier(0.075, 0.82, 0.165, 1),
4    transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
5}
6
7.button {
8  background: none;
9  border: none;
10  border-radius: 56px;
11  cursor: pointer;
12  color: #171717;
13  box-shadow: 0px 127px 36px 0px rgba(23, 23, 23, 0),
14    0px 81px 33px 0px rgba(23, 23, 23, 0.01),
15    0px 46px 27px 0px rgba(23, 23, 23, 0.05),
16    0px 20px 20px 0px rgba(23, 23, 23, 0.09),
17    0px 5px 11px 0px rgba(23, 23, 23, 0.1);
18}
19
20.button span {
21  font-size: 18px;
22  line-height: 36px;
23  font-weight: 500;
24  text-shadow: 0px 1px 1px rgba(23, 23, 23, 0.25);
25}
26
27.button .inner {
28  background: linear-gradient(0deg, #fff 0%, #edeeee 100%);
29  padding: 16px 24px;
30  display: flex;
31  align-items: center;
32  gap: 12px;
33  border-radius: 56px;
34}
35
36.button .outer {
37  padding: 6px;
38  border-radius: 16px;
39  background: linear-gradient(180deg, #fff 25.56%, #ebebeb 115.56%);
40}
41
42.button .border {
43  padding: 3px;
44  border-radius: 20px;
45  border: 1px solid #f0f0f0;
46  background: linear-gradient(180deg, #e3e3e3 0%, #7d7d7d 100%);
47}
48
49.button:hover .icon {
50  transform: rotate(45deg);
51}
52
53.button:hover {
54  transform: scale(1.03);
55  box-shadow: 0px 185px 52px 0px rgba(23, 23, 23, 0),
56    0px 119px 47px 0px rgba(23, 23, 23, 0.01),
57    0px 67px 40px 0px rgba(23, 23, 23, 0.05),
58    0px 30px 30px 0px rgba(23, 23, 23, 0.09),
59    0px 7px 16px 0px rgba(23, 23, 23, 0.1);
60}
61
62.button:active {
63  transform: scale(0.94);
64  box-shadow: 0px 43px 12px 0px rgba(23, 23, 23, 0),
65    0px 28px 11px 0px rgba(23, 23, 23, 0.01),
66    0px 16px 9px 0px rgba(23, 23, 23, 0.05),
67    0px 7px 7px 0px rgba(23, 23, 23, 0.09),
68    0px 2px 4px 0px rgba(23, 23, 23, 0.1);
69}
70