Buttons are an essential element of any website. They provide users with a clear call to action and help to guide them through your site. In Squarespace 7.1, you can easily add buttons to your website and customize their styling.

However, if you want to take your button design to the next level, you may need to edit button styles manually.

In this blog post, we'll guide you through the process of editing button styles in Squarespace 7.1, so you can create buttons that match your website's unique style.

Customizing Button Styles

To customize your button styles, click on the ”Site Styles (Pencil)” icon and select the “Buttons” option from the site styles menu.

This will open the button styles side pane where you can customize various button-related styling options. Squarespace offers three different button styles namely: primary, secondary and tertiary.

You can customize the style of each of these buttons in this side pane. First, click on the button type you want to style.

For every button type you can change the following options:

i) Text

To change any text-related styles, click on the down arrow next to the text field. A modal will open up, here you can change the font of the button text, its style, weight, letter space, style as well and font size.

To change the font, click on the font name

Now, click on the “Browse all fonts” option. This will display all the inbuilt squarespace fonts. Choose the desired font for your button.

ii) Shape

To change the shape of your button, click on the shape drop-down. There are two primary styles: Fill and No Fill. And there are multiple shapes available under these two categories.

iii) Outline

With the outline option, you can change the outline of the button. Drag the slider to increase or decrease the width of the outline.

iv) Horizontal Padding

The horizontal padding option lets you change the horizontal space or padding between the text and the left and right outline of the button. You can use the slider to increase or decrease the padding.

v) Vertical Padding

The vertical padding option lets you change the vertical space or padding between the text and the top/bottom outline of the button. You can use the slider to increase or decrease the padding.

If you want a certain button style to be applied to all the other button types, then click on the “Apply to all button types” option. This will apply the button style of one button type (for eg: primary) to other buttons as well (i.e. secondary and tertiary).

To reset the styling applied to all button types and bring them back to their default style, click on the “Reset button styles” option.

Editing Button Block

To edit an added button block, click on the “Edit (Pencil)” icon of any button block.

If you want to change the button text or link, then you can change those values under the “Content” tab.

To change the design of the button, click on the “Design” tab. Here you can change the button type (that is to primary, secondary or tertiary). You can also select the size of the button to fit or fill.

The button type can also be changed from the type drop-down present next to the edit icon.

Editing button styles in Squarespace 7.1 is not as difficult as it may seem. With just a few simple steps, you can create buttons that match your website's unique style and provide users with a clear call to action.

We hope that this blog post has been helpful in guiding you through the process of editing button styles and that you feel confident in your ability to create buttons that will enhance your website's design and functionality.