Button by KSAplay

1.container {
2  transition: 200ms ease;
3}
4
5.button {
6  position: relative;
7  display: flex;
8  align-items: center;
9  justify-content: center;
10  padding: 10px 40px;
11  border-width: 0;
12  border-radius: 1em;
13  background-color: #19171C;
14  transition: 500ms ease;
15}
16
17.button p {
18  font-size: 20px;
19  font-weight: bold;
20  background: rgb(137,60,21);
21  background: linear-gradient(90deg, rgba(137,60,21,1) 0%, rgba(255,222,68,1) 17%, rgba(177,116,30,1) 24%, rgba(255,231,82,1) 40%, rgba(224,147,38,1) 50%, rgba(228,150,42,1) 59%, rgba(176,120,27,1) 70%, rgba(239,179,51,1) 85%, rgba(135,58,26,1) 100%);
22  -webkit-background-clip: text;
23  -webkit-text-fill-color: transparent;
24}
25
26.button::before {
27  position: absolute;
28  content: '';
29  width: 190px;
30  height: 50px;
31  border-radius: 1em;
32  background-size: 100%;
33  background: rgb(137,60,21);
34  background: linear-gradient(90deg, rgba(137,60,21,1) 0%, rgba(255,222,68,1) 17%, rgba(177,116,30,1) 24%, rgba(255,231,82,1) 40%, rgba(224,147,38,1) 50%, rgba(228,150,42,1) 59%, rgba(176,120,27,1) 70%, rgba(239,179,51,1) 85%, rgba(135,58,26,1) 100%);
35  z-index: -1;
36}
37
38.container:hover .button::before {
39  animation: golden 5s infinite alternate ease-in-out;
40}
41
42.container:hover .button p {
43  animation: golden 5s infinite alternate ease-in-out;
44}
45
46.container:hover {
47  transform: scale(1.1);
48}
49
50.container:active {
51  transform: scale(1);
52}
53
54.container:active .button::before {
55  animation: golden 1s infinite alternate ease-in-out;
56}
57
58.container:active .button p {
59  animation: golden 1s infinite alternate ease-in-out;
60}
61
62@keyframes golden {
63  0% {
64    background-size: 100%;
65    background-position: 50%;
66  }
67
68  50% {
69    background-size: 500%;
70    background-position: 0%;
71  }
72
73  100% {
74    background-size: 200%;
75    background-position: 100%;
76  }
77}