Button by zjssun

1.button {
2  position: relative;
3  border: none;
4  background: transparent;
5  --stroke-color: #ffffff7c;
6  --ani-color: rgba(95, 3, 244, 0);
7  --color-gar: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
8  letter-spacing: 3px;
9  font-size: 2em;
10  font-family: "Arial";
11  text-transform: uppercase;
12  color: transparent;
13  -webkit-text-stroke: 1px var(--stroke-color);
14  cursor: pointer;
15}
16
17.front-text {
18  position: absolute;
19  top: 0;
20  left: 0;
21  width: 0%;
22  background: var(--color-gar);
23  -webkit-background-clip: text;
24  background-clip: text;
25  background-size: 200%;
26  overflow: hidden;
27  transition: all 1s;
28  animation: 8s ani infinite;
29  border-bottom: 2px solid transparent;
30}
31
32.button:hover .front-text {
33  width: 100%;
34  border-bottom: 2px solid #03a9f4;
35  -webkit-text-stroke: 1px var(--ani-color);
36}
37
38@keyframes ani {
39  0% {
40    background-position: 0%;
41  }
42
43  50% {
44    background-position: 400%;
45  }
46
47  100% {
48    background-position: 0%;
49  }
50}
51