Adding buttons to your site

Create button links to help visitors explore your content or find important information.

Last updated July 8, 2024

You can add buttons to your site that encourage visitors to engage with your content. Buttons are a visual addition to your page, making it easier for visitors to know where to click.

To maximize your impact, we recommend keeping your button text short and sweet. Try a single word, like "Donate," or a short key phrase, like "Take action."

This guide explains the many ways to add buttons to your site.

Tip

To help make your buttons accessible to the broadest audience possible, visit Accessibility resources at Squarespace.

Watch a video

Add buttons (almost) anywhere with button blocks

Button blocks are the most versatile way to add a call to action to your site. You can add a button block to any Fluid Engine section or classic editor content area on your site and customize how it appears in your layout.

Button blocks can link to your site content, external content, files, email addresses, and phone numbers. To learn more, visit Button blocks.

Button_1.png

Button_1.png

Header buttons

Adding a button to a header puts your call to action at the top of the page. This encourages visitors to click it right away. To learn more about header buttons, visit Building a site header.

Squarespace_7.1_header_button.jpg

Banner buttons

A banner button stands out on your background or banner image. If you want your visitors to take a specific action upon arriving at your site, add a hard-to-miss banner button.

If your site is on version 7.1, add a background image to a block section, then add a button block. If your site is on version 7.0, your banner button options depend on your template.

Banner_image_button_on_Brine.png

A footer is the section at the very bottom of your site. They often include details about the site or business. Add a button to your footer to help visitors find important information or take a specific action after they've explored your main content. To learn more about, visit Editing footers.

Squarespace_version_7.1_footer_button.jpg

Squarespace_version_7.1_footer_button.jpg

Auto layout buttons

To promote different calls-to-action, link to different projects, or introduce your team, use an auto layout. Auto layouts arrange sets of content into columns and rows. Each item in an auto layout can include a button, and you can add a button for the whole section either above or below the items. To learn more, visit Auto layouts.

Auto_layout_item_buttons_and_section_button.png

Form and newsletter block buttons

To encourage visitors to contact you or subscribe to your newsletter, add a form block or newsletter block. Both of these blocks include a Submit or Sign Up button by default, but you can customize the text. To learn more, visit Form blocks or Newsletter blocks.

Button_4.png

Commerce and donation buttons

When your visitors are purchasing products or donating money, commerce and donation buttons help them complete the process:

Image block buttons

Most image block layouts in the classic editor can display clickthrough links as a button on, beside, or below the image, depending on the layout. Use this method to include an image with your link. If you're using Fluid Engine, place a button block with your image block to replicate these layouts. To learn more, visit Image blocks.

Promotional pop-up buttons

You can create a pop-up that appears when visitors land on your site and add up to two buttons to it. Promotional pop-ups can be customized to match your site and the call to action you add to them. To learn more, visit Creating a promotional pop-up.

Pinterest Save buttons

You can add Pinterest Save buttons to certain images on your site so visitors can share your content on Pinterest. As your images are shared more visitors will discover your site. To learn more, visit Adding Pinterest Save buttons.

Buttons on version 7.0

If your site is on version 7.0, you can also add buttons with these options:

  • Content sidebars - If your template supports content sidebars, you can display a button block on some or all of your pages.
  • Cover page buttons - Add up to two buttons to a cover page linking to content on your site or external content.
  • Page headers (sometimes called intro areas) - Add a button block to display a button above the page content on individual pages.
  • Share buttons - Enable share buttons so visitors can share content like blog posts and products to their social media profiles.

Styling buttons

You can customize your buttons to match your site's overall look and feel. For example, with most buttons, you can change:

  • Background color
  • Font
  • Shape
  • Size

To ensure the most control over the look of your buttons, we recommend keeping button text under 25 characters, as all buttons change size and shape to accommodate text.

Your styling options depend on your site's version. To learn more, visit Styling buttons.

Track button clicks in analytics

In Form & button conversions analytics, you can review how often visitors click content-related buttons. Using the insights in this panel, you can compare which buttons are most effective and understand how style or position changes affect button clicks over time.

In purchase funnel analytics, you can review how many customers clicked the Add to Cart button for your products.

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.