Buttons are a common website feature because they add visual flare while encouraging visitors to click a link or engage with content. 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."
There are many ways to add buttons in Squarespace, and this guide will walk you through these options.
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 content area on your site and customize how it appears in your layout.
Button Blocks can link to your site content, external content, and files. To learn more, visit Button Blocks.
Header and banner buttons
Adding a button to a header or banner image puts your call to action front and center, encouraging visitors to click it right away. Your options depend on your site's version.
A call to action button in your site header displays site-wide. To add a button to your header:
- Click Edit on a page on your site.
- Click Edit Site Header.
- Click Elements.
- Switch the Button toggle on.
- Below, edit the button text and the link.
- Hover over Done and click Save.
Depending on the layout you choose for your header, the button may be grouped with your navigation links or apart from them.
Add a banner image to the top of any page by adding a section with a background image. To add a button overlaying the banner, add a Button Block to the section's content.
You can add buttons to the site header in these template families:
- Bedford - Display the last link in your navigation as a button
- Brine - Style the Primary Navigation or Secondary Navigation, or both, as buttons
- Montauk - Add a Button Block to the custom subtitle in the header.
- Skye - Add a Button Block to the site navigation overlay.
- Wells - Add a Button Block to the navigation sidebar's content area.
Here's how it looks in Bedford:
These template families include special overlay options for adding buttons over banner images and videos on individual pages:
- Bedford - Format the page description text to create a button in the last line.
- Brine - Add a Button Block to the intro area on a page with a banner.
Here's how that looks in the Brine template:
Some templates have other editable areas where you can add a Button Block:
- Page headers, sometimes called intro areas, display above the page content on individual pages.
- Depending on your template, content sidebars can display on some or all pages.
- Most templates support an editable site-wide footer, if you'd like to have your call to action be the last thing visitors see. Some templates also support page footers.
Form and Newsletter Block buttons
To encourage visitors to contact you or subscribe to your newsletter, add a Form or Newsletter Block. Both of these blocks include a Submit or Sign Up button by default, but you can customize the text.
Commerce and donation buttons
- Add to Cart buttons - Every product item's page has an Add to Cart button. You can customize this text. If Express Checkout is enabled, it says Purchase instead.
- Donation Block buttons - The donation block displays a button that sends customers to a donation page. They can send payments directly to your bank account.
Image Block buttons
Most Image Block layouts can display clickthrough links as a button on, beside, or below the image, depending on the layout. 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.
Pinterest Save buttons
You can add Pinterest Save buttons to certain images on your site so visitors can share your content on Pinterest.
Buttons on version 7.0
If your site is on version 7.0, you can also add buttons with these options:
- Cover Page buttons - Add up to two buttons to a Cover Page linking to content on your site or external content.
- Share buttons - Enable share buttons so visitors can share content like blog posts and products to their social media profiles.
You can customize your buttons to match your site's overall look and feel. For example, you can change:
- Background color
To create a consistent design, style changes you make to one type of button usually apply to all of those buttons on your site. To learn more, visit Styling buttons.
Track button clicks in Analytics
In Form & Button Conversions Analytics, you can see how frequently 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 see how many customers clicked the Add to Cart buttons for products.