Z-index issue with animation

Hello everyone, I am new to web design. I followed this tutorial (https://www.youtube.com/watch?v=PTVXnOrQoBQ) from Coding2Go and basically made a gradient outline for my button. I am trying to make the button and the gradient background behind it appear 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.

After I hover over the button, the gradient background goes behind the actual button (so it looks like an outline) and now everything functions as normal. Could anyone help me make it so that both the button AND gradient bg of button appear at the same time instead of the gradient coming in at the front?

I have attached the code here:

https://codepen.io/pen?template=LENmjeQ

hello and welcome to fcc forum :slight_smile:

try changing animation delays for both animations and see which fits your needs, happy coding :slight_smile: