Remove the highlight part of Header Newsletter Button when Hovering

Site URL: https://www.thesocialflair.co/

In the newsletter block of my footer, when you hover over the "Sign up" button, the text is highlighted with black which I want to remove. I want the background to be completely white while the text is black. Please help!!

Here is the custom CSS on my page right now

.site-wrapper{background: linear-gradient(#DACEC4, #CEAA9A, #947B73)!important;}

.page-section, .section-background{background:transparent!important;}

footer,
footer *
 {
 background-color: black!important;
}
footer.sections input {
    background-color: white !important;
}

footer.sections button.newsletter-form-button * {
    color: white;
}

14 hours ago, Ashlakhi said:

Site URL: https://www.thesocialflair.co/

In the newsletter block of my footer, when you hover over the "Sign up" button, the text is highlighted with black which I want to remove. I want the background to be completely white while the text is black. Please help!!

Here is the custom CSS on my page right now

.site-wrapper{background: linear-gradient(#DACEC4, #CEAA9A, #947B73)!important;}

.page-section, .section-background{background:transparent!important;}

footer,
footer *
 {
 background-color: black!important;
}
footer.sections input {
    background-color: white !important;
}

footer.sections button.newsletter-form-button * {
    color: white;
}

Try adding to Home > Design > Custom Css

footer .newsletter-form-button:hover .newsletter-form-button-label{
  color: #000;
}

footer .newsletter-form-button-label {
  background-color: transparent !important;
}

Hope it helps

Support me by pressing 👍 if this useful for you

My testing

Yes @bangank36 It works - you are super quick. 

14 hours ago, bangank36 said:

Try adding to Home > Design > Custom Css

.newsletter-form-button:hover .newsletter-form-button-label{
  color: #000;
}

.newsletter-form-button-label {
  background-color: transparent !important;
}

Hope it helps

Support me by pressing 👍 if this useful for you

Hi,

Yes it works but it affects the colors of the newsletter block button on my homepage. How can I make it so it only applies to the newsletter block on my footer and nowhere else?

4 minutes ago, Ashlakhi said:

Hi,

Yes it works but it affects the colors of the newsletter block button on my homepage. How can I make it so it only applies to the newsletter block on my footer and nowhere else?

Kindly check the the code about again

Seems like i had 2 different codes for the same thing in a different format. I played around with the code and got it to work. Thank you so much for your help @bangank36