Button Border Outline Width Customize CSS

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!

Thanks that worked!

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?

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?

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?

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.

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?

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;
}