Problem mit der Z-Index-Animation in CSS ⇐ CSS

[Anonymous]

Ich bin neu im Webdesign und habe im Grunde genommen einen Verlaufsumriss für meinen Button erstellt. Ich versuche, die Schaltfläche und den Hintergrund mit Farbverlauf dahinter zusammen mit einer Animation anzuzeigen. Wenn ich das mache, läuft alles wie gewohnt ab, mit der Ausnahme, dass der Verlaufshintergrund erst anfänglich erscheint, wenn die Seite geladen wird, die eigentliche Schaltfläche jedoch nicht.
Nachdem ich mit der Maus über die Schaltfläche gefahren bin, wird der Verlaufshintergrund hinter die eigentliche Schaltfläche verschoben, sodass er wie ein tatsächlicher Umriss aussieht und jetzt alles wie gewohnt funktioniert. Könnte mir jemand dabei helfen, dass sowohl die Schaltfläche als auch der Verlaufshintergrund der Schaltfläche gleichzeitig angezeigt werden, anstatt dass der Verlauf vorne erscheint?
Ich habe den Code hier angehängt:

Code: Select all

*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
font-family: "Parkinsans", sans-serif;
}

.button{
position: relative;
margin: 16px -105px 0 130px;
display: inline-block;
padding: 10px 28px;
background-color: aliceblue;
border-radius: 1000px;
color: rgb(96, 54, 61);
animation: buttonanim;
opacity: 0;
animation-duration: 1s;
animation-delay: 2s;
animation-fill-mode: forwards;
}
.button::after{
content: '';
position: absolute;
height: 107%;
width: 102%;
border-radius: 1000px;
top: -1.415px;
left: -1.5px;
background-image: linear-gradient(to bottom right, rgb(92, 96, 54) , rgba(247, 75, 23, 0.648));
animation: z-index-hack;
animation-duration: 1s;
animation-delay: 2s;
animation-fill-mode: forwards;

}
.button:hover{
background-color: rgba(255, 255, 255, 0.705);
background-image: linear-gradient(to bottom right, rgba(226, 248, 27, 0.663) , rgba(247, 75, 23, 0.449));
animation: buttonanim;
animation-delay: 2s;
animation-fill-mode: forwards;
}
@keyframes buttonanim{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes z-index-hack{
0%, 100%{ z-index: -1;}
}

Code: Select all

 
World's Leading Fruit Exporters
Ranked #1 in 2025 World's Biggest Fruit Exporters By GlobalExporters
LEARN MORE
CONTACT US