Jump to content

Change button color on hover

Recommended Posts

Can anyone tell me what kind of code I'd need to put into the custom CSS to get my buttons to change color on hover? I'm using the "primary" and "secondary" buttons. By default there is an overlay on hover and I can't even find where that is in the style editor. I tried to insert some code that I thought would work but I failed lol CSS is not my strong suit.

Attached is a picture of one of the buttons I'm trying to change! Thanks!

Screen Shot 2023-06-06 at 3.13.38 PM.png

Link to comment
  • Replies 3
  • Views 2.4k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hey @2cubed this is a great question - and one of my favorite things to code for Squarespace! 🙌 

The tricky part in Squarespace CSS is that there are over 10 unique button selectors. Primary and secondary selectors are good catch-all codes that can work for some button types, but something specific like the newsletter block uses a more unique selector. 

Update the word red in this code to the color name/color code you want to use:

.newsletter-form-button:hover{
background:red!important
}

 

Side note - a standard opacity change happens to some buttons on a hover, so add opacity:1!important to your code if it's not the full color you want.

Hope that helps and best of luck with your project!

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

Link to comment
  • 8 months later...
On 2/28/2024 at 8:42 AM, ganimcompany said:

Im having a similar issue. Trying to change the button hover for a contact form to #FBEE06 . Not sure how to go about this or where to input the code

You can use this code to Website > Website Tools > Custom CSS. If the code doesn't work, you can share link to page where you use contact form, we can check easier.

div.form-block input.button:hover {
    background-color: #FBEE06 !important;
    color: #FBEE06 !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (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.