Button by n-jaisabai

1.button {
2  background: radial-gradient(ellipse at top, white, blue, black, black);
3  color: white;
4  position: relative;
5  background-size: 130% 130%;
6  background-position: center center;
7  padding: 15px 30px;
8}
9
10.button:hover {
11  background: radial-gradient(ellipse at top, white, blue, black, black);
12  animation: gradient 4s;
13  animation-fill-mode: forwards;
14  /* background-position: center center; */
15}
16
17.button:hover:after {
18  content: "";
19  position: absolute;
20  inset: -.625em;
21  background: radial-gradient(ellipse at top, white, blue, black, black);
22  /* background-position: center center; */
23  filter: blur(1.5em);
24  z-index: -1;
25  animation: gradient 4s;
26  animation-fill-mode: forwards;
27}
28
29@keyframes gradient {
30  0% {
31    background-size: 130% 130%;
32  }
33
34  100% {
35    background-size: 200% 200%;
36  }
37}
38