Jump to content

Set a specific radius for buttons site wide

Recommended Posts

Just now, creedon said:

Would the pill button shape do for your needs?

678176674_ScreenShot2021-02-17at2_48_34PM.png.66a22e3822ce93f5643f31dc13739614.png

Hey thanks for coming back! No, unfortunately, I was looking for a radius of around 10px or so as opposed to the 50px or whatever the pill shape is.

Link to comment


Add the following to Design > Custom CSS.

body:not( .button-style-default ).primary-button-shape-rounded .sqs-editable-button,
body.button-style-default.primary-button-shape-rounded .sqs-editable-button,
body:not( .button-style-default ).primary-button-shape-rounded .sqs-editable-button-layout,
body.button-style-default.primary-button-shape-rounded .sqs-editable-button-layout,
body:not( .button-style-default ).primary-button-shape-rounded .sqs-editable-button-font,
body.button-style-default.primary-button-shape-rounded .sqs-editable-button-font,
body:not( .button-style-default ).primary-button-shape-rounded .sqs-editable-button-color,
body.button-style-default.primary-button-shape-rounded .sqs-editable-button-color,
body:not( .button-style-default ).primary-button-shape-rounded .sqs-editable-button-style,
body.button-style-default.primary-button-shape-rounded .sqs-editable-button-style,
body:not( .button-style-default ).primary-button-shape-rounded .sqs-editable-button-shape,
body.button-style-default.primary-button-shape-rounded .sqs-editable-button-shape,
body:not( .button-style-default).primary-button-shape-rounded .sqs-add-to-cart-button,
body.button-style-default.primary-button-shape-rounded .sqs-add-to-cart-button

  {
  
    border-radius : 10px;

    }

This code is specific to the poster's need.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
5 minutes ago, creedon said:


Add the following to Design > Custom CSS.


body:not( .button-style-default ).primary-button-shape-rounded .sqs-editable-button,
body.button-style-default.primary-button-shape-rounded .sqs-editable-button,
body:not( .button-style-default ).primary-button-shape-rounded .sqs-editable-button-layout,
body.button-style-default.primary-button-shape-rounded .sqs-editable-button-layout,
body:not( .button-style-default ).primary-button-shape-rounded .sqs-editable-button-font,
body.button-style-default.primary-button-shape-rounded .sqs-editable-button-font,
body:not( .button-style-default ).primary-button-shape-rounded .sqs-editable-button-color,
body.button-style-default.primary-button-shape-rounded .sqs-editable-button-color,
body:not( .button-style-default ).primary-button-shape-rounded .sqs-editable-button-style,
body.button-style-default.primary-button-shape-rounded .sqs-editable-button-style,
body:not( .button-style-default ).primary-button-shape-rounded .sqs-editable-button-shape,
body.button-style-default.primary-button-shape-rounded .sqs-editable-button-shape,
body:not( .button-style-default).primary-button-shape-rounded .sqs-add-to-cart-button,
body.button-style-default.primary-button-shape-rounded .sqs-add-to-cart-button

  {
  
    border-radius : 10px;

    }

Let us know how it goes.

Thanks so much mate!!!

Link to comment
  • 7 months later...
On 2/17/2021 at 4:53 PM, creedon said:


Add the following to Design > Custom CSS.

body:not( .button-style-default ).primary-button-shape-rounded .sqs-editable-button,
body.button-style-default.primary-button-shape-rounded .sqs-editable-button,
body:not( .button-style-default ).primary-button-shape-rounded .sqs-editable-button-layout,
body.button-style-default.primary-button-shape-rounded .sqs-editable-button-layout,
body:not( .button-style-default ).primary-button-shape-rounded .sqs-editable-button-font,
body.button-style-default.primary-button-shape-rounded .sqs-editable-button-font,
body:not( .button-style-default ).primary-button-shape-rounded .sqs-editable-button-color,
body.button-style-default.primary-button-shape-rounded .sqs-editable-button-color,
body:not( .button-style-default ).primary-button-shape-rounded .sqs-editable-button-style,
body.button-style-default.primary-button-shape-rounded .sqs-editable-button-style,
body:not( .button-style-default ).primary-button-shape-rounded .sqs-editable-button-shape,
body.button-style-default.primary-button-shape-rounded .sqs-editable-button-shape,
body:not( .button-style-default).primary-button-shape-rounded .sqs-add-to-cart-button,
body.button-style-default.primary-button-shape-rounded .sqs-add-to-cart-button

  {
  
    border-radius : 10px;

    }

Let us know how it goes.

creedon, added the cose to custom css with no result, what could it be?

https://www.feek.app/home

Link to comment
On 10/8/2021 at 6:39 PM, Migueldelag said:

added the cose to custom css with no result, what could it be?

Add the following to Design > Custom CSS.

.primary-button-shape-rounded .btn,
.primary-button-shape-rounded .sqs-block-button-element--medium,
.primary-button-shape-rounded .sqs-block-button-element--small,
.primary-button-style-outline .white-bold .sqs-block-form .sqs-editable-button

  {
  
    border-radius : 10px;

    }

This may not cover all your buttons.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
23 hours ago, creedon said:

Add the following to Design > Custom CSS.

.primary-button-shape-rounded .btn,
.primary-button-shape-rounded .sqs-block-button-element--small,
.primary-button-shape-rounded .sqs-block-button-element--medium

  {
  
    border-radius : 10px;

    }

This may not cover all your buttons.

Let us know how it goes.

it worked now, thanks!!!

On 10/10/2021 at 8:56 AM, tuanphan said:

It seems work here. Which button doesn't work?

it worked now, thanks!!!

Guys thank you for all the help you provide, specially both of 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.