Jump to content

Remove the highlight part of Header Newsletter Button when Hovering

Recommended Posts

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;
}

Screen Shot 2022-08-02 at 10.35.23 PM.png

Link to comment
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;
}

Screen Shot 2022-08-02 at 10.35.23 PM.png

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

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.68cbdb4e5b95f57167f48334bbb52101.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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?

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.