Change color and hover color on same size buttons on different bachgrounds

Site URL: https://raspberry-wolverine-7tn4.squarespace.com/

Hi all,

One of my clients wants to have different styles of same size buttons on different backgrounds. So for example small botton on grey background blue and on hover white. Same size button on blue background grey and on hover orange. Is this possible whitout using a different size button?

Thanks for you help!

Password: SparkNano_review

You can target Button Block ID to change this

Add this to Design > Custom CSS

/* Homepage - First Section - Button */
div#block-0bdce237a97187584c82 {
a {
    background-color: white;
    color: blue;
}
a:hover {
    background-color: blue;
    color: white;
}}

Find button block id with this tool https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Thanks so much that totally worked. I would like button in the second navigation to do the same. Is that possible?

Also for buttons that are not on the homepage, does the code stay the same?

14 hours ago, EsterB said:

Thanks so much that totally worked. I would like button in the second navigation to do the same. Is that possible?

Also for buttons that are not on the homepage, does the code stay the same?

 

Homepage, just a comment, don't care it 😆

With secondary nav, use this

nav.Header-nav.Header-nav--secondary a {
    background-color: green !important;
    color: blue !important;
}