Newsletter signup with success message

What are you most proud of, and what would you do differently next time?

I'm pretty happy with how I solved the problem of a button hover effect that uses a gradient. Once I realised I couldn't animate a transition from a background-color to a background-image:gradient in vanilla CSS without it flickering, as the gradient pops in and out, especially when quickly moving mouse over the element, I discovered I could just change the blending mode: the gradient is always loaded but the :hover transition only changes its blending mode from Darken (which results in 0% visibility as the entire gradient is lighter than the initial button) to multiply, making it visible.

(this is built with Sass and the $variables are not vanilla CSS)

.email-submit-button {
    transition: all 150ms ease-out;
    background-image: $orange-red-gradient ;
    background-blend-mode: darken;
}

.email-submit-button:hover {
    background-blend-mode: multiply;
}

What challenges did you encounter, and how did you overcome them?

I had a lot of issues thinking about Mobile-first, and my css is disorganised as I added more exceptions. I think this is probably an issue that requires more of my attention in the planning stage

What specific areas of your project would you like help with?

So my solution for the success message involved changing the pop-up message from display:none to display:initial, which felt not great as I did it. I didn't find much about best practices online, should I be loading an entire new element into the DOM somehow when the success fires instead of toggling visibility in js? Should I be looking into frameworks or is there another jump-off point for how to do that?