Button by ankul003

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		#D1ABE6,
29		#9B59B6,
30		#E5D9EC,
31		#FFAFCC,
32		#BDE0FE,
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}