Jump to content

How To: Remove 'faint opacity color' when hovering over a button

Go to solution Solved by Lesum,

Recommended Posts

Posted

Hey Circle Members,

I'm building a template and I need help with two things if someone would be so kindly to offer their knowledge.

Help #01

I was wondering if anyone knows how to get rid of the bothersome faint opacity when you hover over a button? I tried every CSS trick I know, out of options lol.

Help #02

Also, is there a class system doc for Circle members like how Shopify provides? 🥲  I want to help contribute quality designs to Squarespace, so consistency is key for me; don't want to use up too much mental energy trying to finding workarounds (#neurodivergent 😅).

Link:https://green-dachshund-saad.squarespace.com/

Password: demo

  • Solution
Posted

@keptfrozen You can add this code snippet within the Custom CSS panel to remove opacity on button hover:

#siteWrapper.site-wrapper .sqs-block-button-element:hover, .sqs-button-element--primary:hover {
  opacity: 1 !important;
}

I'm not aware of any class system documentation specifically available for Circle members. You might find this blog post helpful: https://launchhubstudio.com/blog/squarespace-css-selectors

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

☕ Did you find my contribution helpful? Buy me a coffee?

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.