Jump to content

Newsletter Button text not visible on hover

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://www.sitbelove.org/

Hello,

 

How do I change the text color on the newsletter button's hover state?

 

Currently, the button is white on hover with white text. I would like to change the hover text to black. 

 

This is the code ive added: 

/*newsletter styling*/

.newsletter-form .newsletter-form-button
{
  width: 300px !important;
      height: 50px !important;
      font-size: 0.9rem !important;
      text-transform: uppercase;
      padding-top: 13px !important;
      font-weight: 600;
      letter-spacing: 1px;
      text-align: center ;
}

.newsletter-block * {color:white!important}


.newsletter-form-body {
    input.newsletter-form-field-element {
      width: 300px !important;
      height: 50px !important;
      font-size: 0.9rem !important;
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: 1px;
      text-align: center;
      background-color: rgba(255, 255, 255, 0.65);
      border: 2px dashed #000;
  }}


Thank you so much for your insight. 

 

password: buddha

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
On 7/15/2022 at 10:44 AM, knellans said:

Site URL: https://www.sitbelove.org/

Hello,

 

How do I change the text color on the newsletter button's hover state?

 

Currently, the button is white on hover with white text. I would like to change the hover text to black. 

 

This is the code ive added: 

/*newsletter styling*/

.newsletter-form .newsletter-form-button
{
  width: 300px !important;
      height: 50px !important;
      font-size: 0.9rem !important;
      text-transform: uppercase;
      padding-top: 13px !important;
      font-weight: 600;
      letter-spacing: 1px;
      text-align: center ;
}

.newsletter-block * {color:white!important}


.newsletter-form-body {
    input.newsletter-form-field-element {
      width: 300px !important;
      height: 50px !important;
      font-size: 0.9rem !important;
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: 1px;
      text-align: center;
      background-color: rgba(255, 255, 255, 0.65);
      border: 2px dashed #000;
  }}


Thank you so much for your insight. 

 

password: buddha

You can try adding Home > Design > Custom Css

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

Let me know how it works on your site

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.236cf2d1a4900f004ce9929ff320f4e4.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

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.