Button by Phelix652

1.btn {
2  --btn-gradient: var(--btn-gradient-from),var(--btn-gradient-to);
3  border: 0 none;
4  appearance: none;
5  transition: all .3s;
6  border-radius: 10px;
7  background-color: var(--btn-bg);
8  box-shadow: 0 0 2px 2px var(--btn-shadow), 0 0 4px 4px var(--btn-shadow), 0 0 8px 8px var(--btn-shadow);
9}
10
11.btn,
12.btn * {
13  box-sizing: border-box;
14}
15
16.btn-inner {
17  position: relative;
18  border-radius: inherit;
19  border: 1px solid transparent;
20  font-size: 1rem;
21  display: flex;
22  align-items: center;
23  min-width: 10rem;
24  padding: 1.5rem 2rem;
25  overflow: hidden;
26  color: var(--btn-text-color);
27}
28
29.btn-label {
30  position: absolute;
31  bottom: 1px;
32  left: 1px;
33  right: 1px;
34  top: 1px;
35  border-radius: inherit;
36  z-index: 10;
37  display: flex;
38  justify-content: center;
39  align-items: center;
40  background-color: var(--btn-bg);
41  background-image: linear-gradient(to bottom,var(--btn-gradient));
42}
43
44.btn:hover {
45  transform: translateY(-5px);
46  letter-spacing: 3px;
47  box-shadow: rgba(0, 131, 253, 0.596) 0px 1px 80px 40px;
48}
49
50.btn:active {
51  border-radius: 40px;
52  transform: translateY(4px);
53  transition: 0.1s;
54  letter-spacing: 3px;
55  box-shadow: rgb(0, 131, 253) 0px 1px 80px 40px;
56}
57
58.btn:active .btn-blur:before {
59  --transition: 0.5s;
60}
61
62.btn--primary {
63  --btn-bg: #111111;
64  --btn-gradient-from: #111111;
65  --btn-gradient-to: rgba(29, 6, 240, 0.5);
66  --btn-text-color: #ffffff;
67  --btn-shadow: #9b14c438;
68}
69
70@keyframes turn {
71  0% {
72    transform: translateY(-50%) rotate(0deg)
73  }
74
75  to {
76    transform: translateY(-50%) rotate(1turn)
77  }
78}
79