Newsletter Signup Form with Interactivity and Error States

I had alot of trouble in the following two things and although I managed to get by in the end by using some "hacks", I have to admit, I'm not proud of how I got by nor do I like how the results. I couldn't achieve what I wanted to and I would appreciate help.

The things I struggled with are the following:

1. Transitioning the background to a linear-gradient

I specified a color for a button's normal background and linear-gradient for the hover state. But I could not get it to transition to the hover state. I wanted it to be smooth but it didn't work. Then I found out that linear-gradients work on image related properties a background-color will not transition to background-image. I still haven't found the correct way to transition to the hover state linear-gradient although I came up with a "hack" for the time being.

2. Custom markers for list items

I got the result I was looking for by adding the tick svg using the ::before pseudo-element on the list item but I think this is not the correct and efficient way to do this because we've got the ::marker pseudo-element for this job. Can someone please tell me how I can achieve the same result by using the ::marker element?