Проблема с анимацией z-index в CSS ⇐ Html

[Anonymous]

Я новичок в веб-дизайне и в основном сделал градиентный контур для своей кнопки. Я пытаюсь сделать так, чтобы кнопка и градиентный фон позади нее отображались вместе с анимацией. Когда я это делаю, все идет как обычно, за исключением того факта, что градиентный фон появляется только после загрузки страницы, а сама кнопка — нет.
После того, как я наведу указатель мыши на кнопку, градиентный фон заходит за фактическую кнопку, поэтому он выглядит как настоящий контур, и теперь все работает как обычно. Может ли кто-нибудь помочь мне сделать так, чтобы кнопка И градиентный фон кнопки отображались одновременно, а не градиент спереди?
Я прикрепил код здесь:

Код: Выделить всё

*{
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;}
}

Код: Выделить всё

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

Подробнее здесь: https://stackoverflow.com/questions/798 ... sue-in-css