Jump to content

Help with button hover states

Recommended Posts

Looking for help managing button hover states on my site please: www.themarketingsteer.com. 

Ideally, I'd like to have primary, secondary and tertiary buttons change colours on hover, with both the background and text colour changing (different per button, per colour profile). 

E.g. primary button in nav goes white with blue text on hover.

Also looking to make the nav items that aren't primary buttons have an underline on hover, with the weight of the underline customisable. 

Big thanks in advance if anyone can help!

Link to comment
  • Replies 3
  • Views 268
  • Created
  • Last Reply

Top Posters In This Topic

  • 3 weeks later...
On 5/10/2023 at 4:35 AM, Steerhk said:

Looking for help managing button hover states on my site please: www.themarketingsteer.com. 

Ideally, I'd like to have primary, secondary and tertiary buttons change colours on hover, with both the background and text colour changing (different per button, per colour profile). 

E.g. primary button in nav goes white with blue text on hover.

Also looking to make the nav items that aren't primary buttons have an underline on hover, with the weight of the underline customisable. 

Big thanks in advance if anyone can help!

Add this to Design > Custom CSS

a.sqs-button-element--primary:hover {
    background-color: red !important;
    color: violet !important;
}
a.sqs-button-element--secondary:hover {
    background-color: #f1f !important;
    color: #000 !important;
}
a.sqs-button-element--tertiary:hover {
    background-color: white !important;
    color: #000 !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.