CSS Pseudo Element z-index not working properly on pseudo element

Question

Im trying to achieve a hover effect for my button, however the z-index on my pseudo elements doesn't work when the button is hovered. They appear on top of button inside instead of being behind the button.

This is the hover effect im tying to achieve.

But when I tried it, This is what Im getting when hovering

And this is when it is not hovered yet.

Button (Tailwind)

<div className='newtask-button bg-black justify-center items-center text-white font-space w-32 h-10 cursor-pointer select-none flex lg:h-12 lg:w-40'>
        <img src={Add} alt="Add" className='w-4 lg:w-6'></img>
        <p className='font-space ml-3 text-sm font-semibold'>NEW TASK</p>
    </div>

SCSS

// PARENT
.newtask-button {
    transition: 0.2s all ease-in-out;
    position: relative;
    background: linear-gradient(75.2deg, #C344D7 34.89%, #E492C2 78.63%, #FFD0B1 116.92%);
}


.newtask-button:before{
    content: "";
    position: absolute;
    background-color: rgba(195, 68, 215, 0.53);
    width: 90%;
    padding: 0;
    margin-inline: auto;
    left: 0;
    right: 0;
    transition: 0.2s ease-in-out;
    height: 100%;
    z-index: -1;
}

.newtask-button:after{
    content: "";
    position: absolute;
    background-color: rgba(195, 68, 215, 0.16);
    width: 80%;
    padding: 0;
    margin-inline: auto;
    left: 0;
    right: 0;
    transition: 0.2s ease-in-out;
    height: 100%;
    z-index: -1;
}

.newtask-button:hover {
    transform: translateY(-12px);
}

.newtask-button:hover:before {
    transform: translateY(6px);
}

.newtask-button:hover:after {
    transform: translateY(12px);
}