Jump to content

How can I make my buttons transparent with a white outline?

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 11
  • Views 4.6k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
On 3/1/2021 at 3:56 PM, scholarsayze said:

AWESOME!! Thank you looks lovely!

Is there a way to apply this to all buttons on the home page https://bluebird-porcupine-yzdg.squarespace.com/home - I only have one extra button in the 'Collection' section.

Can you help me to also extend just the width of these buttons for both desktop and other devices please?

Many thanks!

Use this new code

body.homepage a.sqs-block-button-element {
    background: transparent !important;
    border: 1px solid white;
    width: 350px;
}

 

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
  • 7 months later...
On 10/25/2021 at 11:27 PM, acqalt said:

How do I get this code to apply to buttons on all pages, not just the homepage:

body.homepage a.sqs-block-button-element {
    background: transparent !important;
    border: 1px solid white;
    width: 350px;
}

Thank you!

remove body.homepage

a.sqs-block-button-element {
    background: transparent !important;
    border: 1px solid white;
    width: 350px;
}

 

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
  • 1 year later...
On 2/4/2023 at 5:44 AM, TaylorStil said:

This is great code. I tried changing the outline color from white to black,  but it didn't work. Is there a workaround for transparent with black outline? Thank you!

Which exact code did you use & link to your site?

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
  • 7 months later...
On 9/23/2023 at 6:28 AM, Immortal_Explorer said:

I couldn't get it to work, I just want one button to be transparent with a white outline on the main image on my homepage

 

www.brainforestcreative.com

First remove this code

#siteWrapper #block-yui_3_17_2_1_1695405854054_28364 {
    opacity: 58%!important;
}

Next add this code

#siteWrapper #block-yui_3_17_2_1_1695405854054_28364 a {
    background-color: transparent !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.