1button {
2 --border-radius: 15px;
3 --border-width: 4px;
4 appearance: none;
5 position: relative;
6 padding: 1em 2em;
7 border: 0;
8 background-color: #212121;
9 font-family: "Roboto", Arial, "Segoe UI", sans-serif;
10 font-size: 18px;
11 font-weight: 500;
12 color: #fff;
13 z-index: 2;
14}
15
16button::after {
17 --m-i: linear-gradient(#000, #000);
18 --m-o: content-box, padding-box;
19 content: "";
20 position: absolute;
21 left: 0;
22 top: 0;
23 width: 100%;
24 height: 100%;
25 padding: var(--border-width);
26 border-radius: var(--border-radius);
27 background-image: conic-gradient(
28		#488cfb,
29		#29dbbc,
30		#ddf505,
31		#ff9f0e,
32		#e440bb,
33		#655adc,
34		#488cfb
35	);
36 -webkit-mask-image: var(--m-i), var(--m-i);
37 mask-image: var(--m-i), var(--m-i);
38 -webkit-mask-origin: var(--m-o);
39 mask-origin: var(--m-o);
40 -webkit-mask-clip: var(--m-o);
41 mask-composite: exclude;
42 -webkit-mask-composite: destination-out;
43 filter: hue-rotate(0);
44 animation: rotate-hue linear 500ms infinite;
45 animation-play-state: paused;
46}
47
48button:hover::after {
49 animation-play-state: running;
50}
51
52@keyframes rotate-hue {
53 to {
54  filter: hue-rotate(1turn);
55 }
56}
57
58button,
59button::after {
60 box-sizing: border-box;
61}
62
63button:active {
64 --border-width: 5px;
65}