1
2button {
3 --width: 150px;
4 --timing: 2s;
5 border: 0;
6 width: var(--width);
7 padding-block: 1em;
8 color: #fff;
9 font-weight: bold;
10 font-size: 1em;
11 background: rgb(64, 192, 87);
12 transition: all 0.2s;
13 border-radius: 3px;
14 cursor: pointer;
15}
16
17button:hover {
18 background-image: linear-gradient(
19 to right,
20 rgb(250, 82, 82),
21 rgb(250, 82, 82) 16.65%,
22 rgb(190, 75, 219) 16.65%,
23 rgb(190, 75, 219) 33.3%,
24 rgb(76, 110, 245) 33.3%,
25 rgb(76, 110, 245) 49.95%,
26 rgb(64, 192, 87) 49.95%,
27 rgb(64, 192, 87) 66.6%,
28 rgb(250, 176, 5) 66.6%,
29 rgb(250, 176, 5) 83.25%,
30 rgb(253, 126, 20) 83.25%,
31 rgb(253, 126, 20) 100%,
32 rgb(250, 82, 82) 100%
33 );
34 animation: var(--timing) linear dance6123 infinite;
35 transform: scale(1.1) translateY(-1px);
36}
37
38@keyframes dance6123 {
39 to {
40 background-position: var(--width);
41 }
42}
43
