Jump to content

Button Border Outline Width Customize CSS

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://broadwaydb.com/

I am trying to customize the width of the button block outline. Squarespace has it set to 2px wide as a default. I am using the outline mode of the Medium button block and I want to change the width of the outline to 1px. This is the code I have tried but it is not working in the custom CSS area.

.sqs-block-button-element--medium {
  border: 1px solid #000000;
}

 

Any help would be awesome

Thanks!

Link to comment
  • 7 months later...

Hey! Having the same problem.

I have two pseudo buttons on my header nav as well as buttons on my image cards. This code doesn't target them properly.

My site is https://cyan-chinchilla-833w.squarespace.com/ password is pass

@tuanphan is there any way to effectively target these?

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
💸 Speedrun your first $100k as a Squarespace designer: sixfiguredesign.club
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment
17 hours ago, bycrawford said:

Hey! Having the same problem.

I have two pseudo buttons on my header nav as well as buttons on my image cards. This code doesn't target them properly.

My site is https://cyan-chinchilla-833w.squarespace.com/ password is pass

@tuanphan is there any way to effectively target these?

I see all buttons here. Do you still need help? Can you describe in detail?

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
30 minutes ago, tuanphan said:

I see all buttons here. Do you still need help? Can you describe in detail?

I managed to do it but can't seem to change their colour for both the header buttons and image card buttons. Is there an identifier for these?

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
💸 Speedrun your first $100k as a Squarespace designer: sixfiguredesign.club
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment
  • 10 months later...

Is there a way to make an inner border for the buttons instead of an outer one,

Current border is dominating extra space on mouse hover due to the outer stroke > causing my blocks to move further down.

Here's the code that im using:

//button style
.sqs-block-button-element:hover {
  border: 0.1px solid #EBA900;
  border-width: 0.1px !important;
 color: #EBA900;
 background-color: #ffff;
 transition: all ease-in-out 0.5s;
 opacity: 1!important;
}

Thank you.

 

Edited by mcgharios
Link to comment
19 hours ago, mcgharios said:

Is there a way to make an inner border for the buttons instead of an outer one,

Current border is dominating extra space on mouse hover due to the outer stroke > causing my blocks to move further down.

Here's the code that im using:

//button style
.sqs-block-button-element:hover {
  border: 0.1px solid #EBA900;
  border-width: 0.1px !important;
 color: #EBA900;
 background-color: #ffff;
 transition: all ease-in-out 0.5s;
 opacity: 1!important;
}

Thank you.

 

Can you share link to page where you use button?

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
  • 6 months later...
On 5/25/2022 at 11:41 AM, ZABS860 said:

I'm trying to make the stroke of the buttons on my site thinner. The website is https://aimeesternluxuryrealestate.squarespace.com and the password is Newpassword,

Right now I have them set to outline, but the default stroke weight of the outline is too heavy. Is there a way to make it about 50% thinner?

Use this CSS

.user-items-list-item-container[data-section-id="628d64b57c0c6a0128543652"] a.list-item-content__button.sqs-block-button-element.sqs-block-button-element--medium.sqs-button-element--primary {
    border: none !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.