1.button {
2  all: unset;
3  width: 100px;
4  height: 30px;
5  font-size: 16px;
6  background: transparent;
7  border: none;
8  position: relative;
9  color: #f0f0f0;
10  cursor: pointer;
11  z-index: 1;
12  padding: 10px 20px;
13  display: flex;
14  align-items: center;
15  justify-content: center;
16  white-space: nowrap;
17  user-select: none;
18  -webkit-user-select: none;
19  touch-action: manipulation;
20  transition: 0.3s ease-in-out;
21}
22
23.button:hover {
24  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
25}
26
27.button::after,
28.button::before {
29  content: '';
30  position: absolute;
31  bottom: 0;
32  right: 0;
33  z-index: -99999;
34  transition: all .4s;
35}
36
37.button::before {
38  transform: translate(0%, 0%);
39  width: 100%;
40  height: 100%;
41  background-color: #4158D0;
42  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
43  border-radius: 10px;
44}
45
46.button::after {
47  transform: translate(10px, 10px);
48  width: 35px;
49  height: 35px;
50  background: #6804da2f;
51  backdrop-filter: blur(5px);
52  -webkit-backdrop-filter: blur(5px);
53  border-radius: 50px;
54}
55
56.button:hover::before {
57  transform: translate(5%, 20%);
58  width: 110%;
59  height: 110%;
60}
61
62.button:hover::after {
63  border-radius: 10px;
64  transform: translate(0, 0);
65  width: 100%;
66  height: 100%;
67}
68
69.button:active::after {
70  transition: 0s;
71  transform: translate(0, 5%);
72}