2022 Guide to adding buttons in Squarespace 7.1

By David Nge • Last Updated: June 13, 2022

Here's a step-by-step tutorial on how to add a button in Squarespace.

In Summary, we'll go over:

By the end of this tutorial you will have successfully added a button on any page of your site and customize its functionality and style.

Let's dive right in.

How to add a button in Squarespace

First, login to your Squarespace account and select a site to edit.

Select a site to edit
Select a site to edit

In your site dashboard, select EDIT to start making changes to the page.

Edit the site
Edit the site

Hover to a section where you want to add the button, select an insert point and select Button from the menu.

Select a button block from the menu
Select a button block from the menu

Update the text box to edit the button label, then add a link for the destination page.

Edit the button label and link
Edit the button label and link

Related: How to customize the button style in Squarespace.

Alternatively, you can configure the button's behaviour when a user clicks on it:

Click on the gear icon (⚙️) and select from the side panel.

Head to the button setting to customize button functionality
Head to the button setting to customize button functionality
Button in Squarespace has a variety of functionalities
Button in Squarespace has a variety of functionalities

Click Save after you're done.

Save changes after you've added the button
Save changes after you've added the button

Add a button via page section

Thanks to Squarespace, some page sections already has a button built-in.

Page section (Headlines) with a button
Page section (Headlines) with a button

So if you'd rather save time then you can select one of the following page sections that has a button in it:

In the page editor, select ADD SECTION and choose one of the layouts mentioned above.

Add the page section with a button
Add the page section with a button

How to create a custom button

Squarespace has made it easy to customize the button style in version 7.1.

In your site dashboard, select DesignSite Styles.

Head to Design Settings
Head to Design Settings
Select site styles to customize button
Select site styles to customize button

If you're already editing the site, look for the Brush icon at the top right corner.

Look for the brush icon if you're in editing mode already
Look for the brush icon if you're in editing mode already

The Site Styles panel will pull up from the right. Select Buttons.

Select Buttons from Site Styles
Select Buttons from Site Styles

You can change the button style, shape and the space between the text and the border (padding).

Customize the button's shape, style, and padding
Customize the button's shape, style, and padding

You can also change the button color by heading back go Site Styles ➞ Colors.

Squarespace now comes with color presets — a collection of color palletes that look good by default!

It's easy to explore another button color that complements your site.

Choose another color palette for the site
Choose another color palette for the site

But if you're feeling adventurous, select a button and customize the color manually.

Customize the button color manually
Customize the button color manually

That's it. You now have a custom styled button.

How to add a button to a text block?

Adding a button in a text block is relatively straightforward.

In your page editor, select an insert point and select Button from the menu.

Add a button to a text block
Add a button to a text block

From there you can edit the button label and add a link, or you can customize the button to however you like.

That's it! You've successfully added a button to a text block.