Button by ahmedgamal-hub

1.glow-on-hover {
2  width: 220px;
3  height: 50px;
4  border: none;
5  outline: none;
6  color: #fff;
7  background: #111;
8  cursor: pointer;
9  position: relative;
10  z-index: 0;
11  border-radius: 10px;
12}
13
14.glow-on-hover:before {
15  content: '';
16  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
17  position: absolute;
18  top: -2px;
19  left: -2px;
20  background-size: 400%;
21  z-index: -1;
22  filter: blur(5px);
23  width: calc(100% + 4px);
24  height: calc(100% + 4px);
25  animation: glowing 20s linear infinite;
26  opacity: 0;
27  transition: opacity .3s ease-in-out;
28  border-radius: 10px;
29}
30
31.glow-on-hover:active {
32  color: #000
33}
34
35.glow-on-hover:active:after {
36  background: transparent;
37}
38
39.glow-on-hover:hover:before {
40  opacity: 1;
41}
42
43.glow-on-hover:after {
44  z-index: -1;
45  content: '';
46  position: absolute;
47  width: 100%;
48  height: 100%;
49  background: #111;
50  left: 0;
51  top: 0;
52  border-radius: 10px;
53}
54
55@keyframes glowing {
56  0% {
57    background-position: 0 0;
58  }
59
60  50% {
61    background-position: 400% 0;
62  }
63
64  100% {
65    background-position: 0 0;
66  }
67}
68