1.btn {
2 padding: 0.9em 1.6em;
3 border: none;
4 outline: none;
5 color: #FFF;
6 font-family: inherit;
7 font-weight: 500;
8 font-size: 17px;
9 cursor: pointer;
10 position: relative;
11 z-index: 0;
12 border-radius: 12px;
13}
14
15.btn::after {
16 content: "";
17 z-index: -1;
18 position: absolute;
19 width: 100%;
20 height: 100%;
21 background-color: rgb(46, 46, 46);
22 left: 0;
23 top: 0;
24 border-radius: 10px;
25}
26/* glow */
27.btn::before {
28 content: "";
29 background: linear-gradient(
30    45deg,
31    #FF0000, #002BFF, #FF00C8, #002BFF,
32      #FF0000, #002BFF, #FF00C8, #002BFF
33);
34 position: absolute;
35 top: -2px;
36 left: -2px;
37 background-size: 600%;
38 z-index: -1;
39 width: calc(100% + 4px);
40 height: calc(100% + 4px);
41 filter: blur(8px);
42 animation: glowing 20s linear infinite;
43 transition: opacity .3s ease-in-out;
44 border-radius: 10px;
45 opacity: 0;
46}
47
48@keyframes glowing {
49 0% {
50  background-position: 0 0;
51 }
52
53 50% {
54  background-position: 400% 0;
55 }
56
57 100% {
58  background-position: 0 0;
59 }
60}
61
62/* hover */
63.btn:hover::before {
64 opacity: 1;
65}
66
67.btn:active:after {
68 background: transparent;
69}
70
71.btn:active {
72 color: #000;
73 font-weight: bold;
74}