1.btn {
2  --fancy-button-gradient-0: #8d49fd;
3  --fancy-button-gradient-50: #7f56f3;
4  --fancy-button-gradient-100: #5691f3;
5  --fancy-button-inner-shadow-top: rgba(233, 209, 255, 0.2);
6  --fancy-button-inner-shadow-top-lg: rgba(9, 12, 60, 0.1);
7  --fancy-button-inner-shadow-bottom: rgba(137, 222, 246, 0.3);
8  --fancy-button-shine-top: #e9d1ff;
9  --fancy-button-shine-bottom: #adfff9;
10  font-family: 'Poppins';
11  font-weight: 500;
12  font-size: 15px;
13  line-height: 21px;
14  text-shadow: 0px 0.5px 0.5px rgba(0, 0, 0, 0.2);
15  padding: 0;
16  margin: 0;
17  appearance: none;
18  border: none;
19  outline: none;
20  overflow: hidden;
21  position: relative;
22  cursor: pointer;
23  z-index: 1;
24  border-radius: 25px;
25  color: #fff;
26  background-image: linear-gradient(to bottom, var(--fancy-button-gradient-0) 0%, var(--fancy-button-gradient-50) 50%, var(--fancy-button-gradient-100) 100%);
27  box-shadow: 0px 4px 12px rgba(9, 12, 60, 0.15), 0px 2px 8px rgba(9, 12, 60, 0.15), 0px 1px 3px var(--fancy-button-inner-shadow-top-lg), inset 0px 1px 1px var(--fancy-button-inner-shadow-top), inset 0px -1px 3px var(--fancy-button-inner-shadow-bottom);
28}
29
30.btn:before, .btn:after {
31  content: '';
32  position: absolute;
33  border-radius: inherit;
34  will-change: transform;
35}
36
37.btn:before {
38  left: 50%;
39  transform: translateX(-50%);
40  background-color: var(--fancy-button-shine-top);
41  width: 96px;
42  height: 6px;
43  top: -3px;
44  opacity: 0.6;
45  filter: blur(6px);
46  transition: opacity 0.25s;
47}
48
49.btn:after {
50  inset: 0;
51  background-size: cover;
52  z-index: 2;
53  opacity: 0.3;
54  mix-blend-mode: overlay;
55  pointer-events: none;
56}
57
58.btn span {
59  display: block;
60  padding: 12px 24px;
61  border-radius: inherit;
62  overflow: hidden;
63  position: relative;
64  background-image: linear-gradient(to bottom, var(--fancy-button-shine-top), transparent 8px);
65  background-position: 0 -6px;
66  background-repeat: no-repeat;
67  z-index: 1;
68}
69
70.btn span:before, .btn span:after {
71  content: '';
72  position: absolute;
73  left: 50%;
74  transform: translateX(-50%);
75  border-radius: 50%;
76  background-color: var(--fancy-button-shine-bottom);
77  transition: opacity 0.25s, transform 0.25s;
78  will-change: transform;
79}
80
81.btn span:before {
82  width: 92px;
83  height: 8px;
84  bottom: -4px;
85  opacity: 0.75;
86  filter: blur(6px);
87}
88
89.btn span:after {
90  width: 112px;
91  height: 1px;
92  bottom: 0;
93  opacity: 0.9;
94  filter: blur(1px);
95}
96
97.btn:hover span:before {
98  opacity: 0.8;
99}
100
101.btn:hover span:before {
102  transform: translateX(-50%) scale(1.25);
103}
104
105.btn:hover span:after {
106  opacity: 1;
107}