ARTICLE AD BOX
I am new to web design and basically made a gradient outline for my button. I am trying to make the button and the gradient background behind it appear together with an animation. When I do this everything goes as normal except the fact that the gradient background only appears initially once the page loads and the actual button doesn't.
After I hover over the button, the gradient background goes behind the actual button so it looks like an actual outline and now everything functions as normal. Could anyone help me make it so that both the button AND gradient background of the button appear at the same time instead of the gradient coming in at the front?
I have attached the code here:
*{
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;}
}
<div class="text">
<h1>World's Leading Fruit Exporters</h1>
<p>Ranked #1 in 2025 World's Biggest Fruit Exporters By GlobalExporters</p>
<a href="" class="button">LEARN MORE</a>
<a href="" class="button" id="button2">CONTACT US</a>
</div>
