Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

Add to Design > Custom CSS

/* Button outline */
.button-block a.sqs-block-button-element[href="/store"] {
    background: transparent !important;
    border: 1px solid white;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...

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.