Jump to content

Newsletter form hover text colour change

Recommended Posts

Site URL: https://peachanddot.com/

Hi,

 

Do you know how to change the hover text for my sign up forms (both can be seen on this page (https://peachanddot.com/freebies) from black to white (so it matches the rest of the buttons on the site). I've managed to change the rest of the buttons with this tweak:

 

/* BUTTON TEXT TWEAK */
.sqs-block-button-element{
color: #ef7b7b !important;
background: #ffffff !important; background-color: rgba(0, 0, 0, 0) !important;
border: 2px solid #ef7b7b !important;

&:hover {
color: #ffffff!important;
background: #ef7b7b !important;
border: 2px solid #ef7b7b !important;
}}
.form-wrapper input[type=submit]:hover {
  color: #ffffff !important;
  background-color: #ef7b7b !important;
}

 

Thanks!

Link to comment
19 minutes ago, peachanddot said:

Site URL: https://peachanddot.com/

Hi,

 

Do you know how to change the hover text for my sign up forms (both can be seen on this page (https://peachanddot.com/freebies) from black to white (so it matches the rest of the buttons on the site). I've managed to change the rest of the buttons with this tweak:

 

/* BUTTON TEXT TWEAK */
.sqs-block-button-element{
color: #ef7b7b !important;
background: #ffffff !important; background-color: rgba(0, 0, 0, 0) !important;
border: 2px solid #ef7b7b !important;

&:hover {
color: #ffffff!important;
background: #ef7b7b !important;
border: 2px solid #ef7b7b !important;
}}
.form-wrapper input[type=submit]:hover {
  color: #ffffff !important;
  background-color: #ef7b7b !important;
}

 

Thanks!

try this

 .newsletter-block .newsletter-form-button:hover {
   color: #fff !important;
}

image.png.c5e44c1485f03a87dc3900b4967a464a.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
On 3/4/2021 at 9:15 PM, peachanddot said:

Yes, that did the trick, thanks a lot!

On tablet, I see huge white spacing here.

Add this to Design > Custom CSS

/* freebies tablet spacing */
@media screen and (max-width:991px) and (min-width:768px) {
div#block-yui_3_17_2_1_1613757506563_7292 {
    display: none;
}
div#block-yui_3_17_2_1_1613757506563_15814 {
    display: none;
}
}

image.thumb.png.a7a40aa7461737a9bedf6efee1dc951e.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...

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.