1.btn {
2  --btn-gradient: var(--btn-gradient-from),var(--btn-gradient-to);
3  border: 0 none;
4  appearance: none;
5  border-radius: 9999px;
6  background-color: var(--btn-bg);
7  box-shadow: 0 0 2px 2px var(--btn-shadow), 0 0 4px 4px var(--btn-shadow), 0 0 8px 8px var(--btn-shadow);
8}
9
10.btn,
11.btn * {
12  box-sizing: border-box;
13}
14
15.btn-inner {
16  position: relative;
17  border-radius: inherit;
18  border: 1px solid transparent;
19  font-size: 1rem;
20  display: flex;
21  align-items: center;
22  min-width: 10rem;
23  padding: 1.5rem 2rem;
24  overflow: hidden;
25  color: var(--btn-text-color);
26}
27
28.btn-label {
29  position: absolute;
30  bottom: 1px;
31  left: 1px;
32  right: 1px;
33  top: 1px;
34  border-radius: inherit;
35  z-index: 10;
36  display: flex;
37  justify-content: center;
38  align-items: center;
39  background-color: var(--btn-bg);
40  background-image: linear-gradient(to bottom,var(--btn-gradient));
41}
42
43.btn-blur {
44  position: absolute;
45  bottom: 1px;
46  left: 1px;
47  right: 1px;
48  top: 1px;
49  z-index: 0;
50  transform: scaleX(3.5);
51  filter: blur(6px);
52}
53
54.btn-blur:before {
55  --gradient: var(--btn-color-from), var(--btn-color), var(--btn-color-to);
56  --transition: 5s;
57  content: "";
58  position: absolute;
59  z-index: 0;
60  top: 50%;
61  bottom: 0;
62  left: 0;
63  right: 0;
64  background-image: conic-gradient(var(--gradient));
65  animation: turn var(--transition) linear infinite;
66}
67
68.btn:hover,
69.btn:active {
70  transition: transform .5s ease-in-out 0s;
71  transform: translateY(-1px);
72}
73
74.btn:active .btn-blur:before {
75  --transition: 2s;
76}
77
78.btn--primary {
79  --btn-bg: #111111;
80  --btn-gradient-from: #111111;
81  --btn-gradient-to: rgba(255, 255, 255, 0.1);
82  --btn-text-color: #ffffff;
83  --btn-color: #5f17d4;
84  --btn-color-from: #c6a3ff;
85  --btn-color-to: #966ed8;
86  --btn-shadow: #5f17d42d;
87}
88
89@keyframes turn {
90  0% {
91    transform: translateY(-50%) rotate(0deg)
92  }
93
94  to {
95    transform: translateY(-50%) rotate(1turn)
96  }
97}