1button {
2  --border-radius: 25px;
3  --border-width: 7px;
4  appearance: none;
5  position: relative;
6  padding: 1em 2em;
7  border: 0;
8  background-color: #212121;
9  font-family: "Roboto", Arial, "Segoe UI", sans-serif;
10  font-size: 18px;
11  font-weight: 500;
12  color: #ffff;
13  z-index: 2;
14}
15
16button::after {
17  --m-i: linear-gradient(#000, #000);
18  --m-o: content-box, padding-box;
19  content: "";
20  position: absolute;
21  left: 0;
22  top: 0;
23  width: 100%;
24  height: 100%;
25  padding: var(--border-width);
26  background-image: conic-gradient(
27		#ff0080,
28		#ff0080,
29		#ff0080,
30		#ff0080,
31		#ff0080,
32		#ff0080,
33		#ff0080
34	);
35  -webkit-mask-image: var(--m-i), var(--m-i);
36  mask-image: var(--m-i), var(--m-i);
37  -webkit-mask-origin: var(--m-o);
38  mask-origin: var(--m-o);
39  mask-clip: var(--m-o);
40  mask-composite: exclude;
41  -webkit-mask-composite: destination-out;
42  filter: hue-rotate(0);
43  animation: rotate-hue634 linear 500ms infinite;
44  animation-play-state: paused;
45  border-radius: 20px;
46  border-color: #000;
47}
48
49button:hover::after {
50  animation-play-state: running;
51  border-radius: 10px;
52}
53
54@keyframes rotate-hue634 {
55  to {
56    filter: hue-rotate(1turn);
57  }
58}
59
60button,
61button::after {
62  box-sizing: border-box;
63  border-radius: 20px;
64}
65
66button:active {
67  --border-width: 5px;
68}
69
70.bn {
71  padding: 0.9em 1.6em;
72  border: none;
73  outline: none;
74  color: #FFF;
75  font-family: inherit;
76  font-weight: 500;
77  font-size: 17px;
78  cursor: pointer;
79  position: relative;
80  z-index: 0;
81  border-radius: 32px;
82}
83
84.bn::after {
85  content: "";
86  z-index: -1;
87  position: absolute;
88  width: 100%;
89  height: 100%;
90  background-color: rgb(46, 46, 46);
91  left: 0;
92  top: 0;
93  border-radius: 10px;
94}
95
96.bn::before {
97  content: "";
98  background: linear-gradient(
99    45deg,
100    #07d888, #e40851, #2f00ff, #00ff37,
101      #ec0808, #2600ff, #0bd157, #2f00ff
102);
103  position: absolute;
104  top: -2px;
105  left: -2px;
106  background-size: 600%;
107  z-index: -1;
108  width: calc(100% + 4px);
109  height: calc(100% + 4px);
110  filter: blur(8px);
111  animation: glowing345 20s linear infinite;
112  transition: opacity .3s ease-in-out;
113  border-radius: 20px;
114  opacity: 0;
115}
116
117@keyframes glowing345 {
118  0% {
119    background-position: 0 0;
120  }
121
122  50% {
123    background-position: 400% 0;
124  }
125
126  100% {
127    background-position: 0 0;
128  }
129}
130
131.bn:hover::before {
132  opacity: 1;
133}
134
135.bn:active:after {
136  background: transparent;
137}
138
139.bn:active {
140  color: #000;
141  font-weight: bold;
142}