Jump to content

Semi opaque button - no hover

By htcreative, in Customize with code

Go to solution Solved by paul2009,

Recommended Posts

htcreative Level 4

htcreative

Posted
Posted

I'm trying to find some css to add a semi-opaque button on an image. At the moment, it is semi-opaque on hover, but i'd like it to display like this off-hover too, rather than a solid colour or totally transparent. Screenshot attached of how I would like it to look.

Thanks,

Screenshot 2023-05-15 at 17.10.33.png

Link to comment
  • Replies 6
  • Views 411
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

paul2009 Level 18

paul2009

Posted
Posted
32 minutes ago, htcreative said:

I'm looking for some css to make a button on the home page semi-opaque all the time

What is the URL of this page?

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment
paul2009 Level 18

paul2009

Posted
Posted

Thanks for the URL. Unfortunately it is password protected, so I cannot view it.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment
  • Solution
paul2009 Level 18

paul2009

Posted
  • Solution
Posted
On 5/16/2023 at 9:50 AM, htcreative said:

I'm trying to find some css to add a semi-opaque button on an image.

Thanks for sharing the site password @htcreative.

You can change the opacity of all secondary buttons by targeting the class .sqs-button-element--secondary. However, to change the opacity of this button, without affecting all the other secondary buttons on the site, you'll need to include a unique selector for this block. 

For example, add this to Design > Custom CSS: 

.fe-block-yui_3_17_2_1_1684155917208_25109 .sqs-block .sqs-button-element--secondary {
  opacity: .8;
}

 

Did this help? Please give feedback by clicking an icon below  ⬇️

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources