Perfekt, das mit CSS zu lösen. Sieht richtig gut aus. Habe folgendes verändert oder dazugestellt, damit du sehen kannst, was ich meine:
1. Weil ich deine Animation so cool finde auf den Button, habe ich den Verlauf loopy gemacht, d.h. 0% & 100% sind gleich.
rgba(164,122,9,1) 0%, rgba(206,163,61,1) 20%, rgba(252,231,136,1) 40%, rgba(232,192,99,1) 60%, rgba(246,206,109,1) 70%, rgba(243,203,104,1) 80%, rgba(164,122,9,1) 100%)
2. Verlauf heller: um klar wieder im Kontrast auf schwarze Schrift gehen zu können und wenn die goldene Schrift auf Schwarz steht ist die Lesbarkeit besser.
3. Animation verlangsamt durch Hintergrundgröße
selector
{
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(204,153,50,100) 20%, rgba(252,231,136,100) 40%, rgba(232,192,99,1) 60%, rgba(246,206,109,100)70%, rgba(243,203,104,100)80%, rgba(150,110,0,1) 100%);
}
selector a{
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(204,153,50,100) 20%, rgba(252,231,136,100) 40%, rgba(232,192,99,1) 60%, rgba(246,206,109,100)70%, rgba(243,203,104,100)80%, rgba(150,110,0,1) 100%););
background-size: 400%;
z-index: 1;
position: relative; }
selector a:hover{
animation: animate 12s linear infinite; }
@keyframes animate { 0%{ background-position:
0%; }
100%{ background-position: 400%; } }
selector a{
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(164,122,9,1) 0%, rgba(206,163,61,1) 20%, rgba(252,231,136,1) 40%, rgba(232,192,99,1) 60%, rgba(246,206,109,1) 70%, rgba(243,203,104,1) 80%, rgba(164,122,9,1) 100%);
background-size: 150%;
z-index: 1;
position: relative; }
selector a:hover{
animation: animate 12s linear infinite; }
@keyframes animate { 0%{ background-position:
0%; }
100%{ background-position: 400%; } }
selector
{
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(204,153,50,100) 20%, rgba(252,231,136,100) 40%, rgba(232,192,99,1) 60%, rgba(246,206,109,100)70%, rgba(243,203,104,100)80%, rgba(150,110,0,1) 100%);
-webkit-background-clip: text;
display: inline-block;
-webkit-text-fill-color: #0000;
}
