Responsive newsletter sign-up form using Constraint Validation API

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

I am quite satisfied with how I handled the form validation using Constraint Validation API.

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

Making the submit button background transition smoothly (from dark blue to the bright gradient) was a minor challenge, since the background property isn’t transitionable. I solved it by creating the gradient as a pseudo-element and changing its opacity.

.standard-btn {
    // Button styling properties here
    //...

    transition: box-shadow 0.2s;
    position: relative;
    overflow: hidden;

    &::before { // for the gradient in active state
        content: '';
        position: absolute;
        inset: -1px;
        background: linear-gradient(90deg, #FF6A3A 0%, #FF527B 100%);
        opacity: 0;
        transition: opacity 0.2s;
    }

    span { // so the gradient doesn't cover the button text
        position: relative;
        z-index: 1;
    }

    &.ready { // class which adds the gradient and box shadow
        box-shadow: 0 rem(16px) rem(32px) 0 rgba(255, 97, 85, 0.50);

        &::before {
            opacity: 1;
        }
    }
}

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

Please do you think the form UX is good? I tried to make it realistic and would like to know if others also perceive it that way or if anything feels off.