A Beginner’s Guide to Squarespace Button Blocks
Squarespace button blocks can be used to link to additional content, files, and even trigger an email.
Please note: button blocks refer to the content block that displays three button styles; primary, secondary, and tertiary.
The information in this article does not apply to other button styles, including product blocks, donation blocks, list sections, or your website header button.
Button blocks are designed for guiding visitors to take action. Create eye-catching buttons that effortlessly direct people to important information.
You have incredible flexibility with Squarespace button blocks. Link them to pages on your site, external websites, downloadable files, or even phone numbers and email addresses.
Pro tip: You can use the form & button conversions feature inside Squarespace Analytics to track clicks and measure the effectiveness of buttons on your site!
How to add a button block to Squarespace
Select edit on the top left-hand side of your website preview.
Click the add block option on a page section, or the plus sign inside classic editor.*
Select the button option form the list of content blocks.
Double click on the block to edit the content, or select the pencil icon.
Update the text. You can change the default "Learn more" text to anything you like.
Pro tip: Short and sweet is best – try to keep it under 25 characters.
Click on attach link to add a link to the individual button. You can choose any website address, including any specific page on your site, or pick from other options like uploading a file.
Choose to have the link open in a new browser tab or the same window.
Choose your button style: primary, secondary, or tertiary. These styles can be edited using the site style menu.
Choose your fit or fill design option.
Fit will resize the button based on the text inside. Buttons using the fit design option can be aligned to the left, center or right.
Fill will stretch the button style to fill the content block container both horizontally and vertically.
Check out the examples on this page to see the difference between fit and fill style options!
*Classic editor is used by blog posts, additional product details, individual events, and sites built on version 7.0 Learn more inside Squarespace Made Simple*
Here is an example of button blocks in a two different layout styles: fit vs fill.
Both of these button content blocks examples are the same size. The button set to fill will have a background and border the same size as the content block.
A button set to fit will be resized based on the text inside, and the padding settings you have assigned in the site style menu for that specific button type; primary, secondary, or tertiary.
What you can customize about the button block using Squarespace
Primary, secondary, and tertiary buttons can all have a unique style, created in the site style menu. Click on the paintbrush icon on the upper right hand side of the screen and select the button option to change the style settings.
Colors for each button can also be changed using the site styles menu. Adjust the color for each button type using the color theme.
The text content for each button can be edited individually.
The font style for each button be changed using the site styles menu.
What you can customize about the button block design using CSS
CSS stands for Cascading Style Sheet and it’s a special type of code that you can use to customize Squarespace. Squarespace designers use custom CSS when the design menu has limited options.
Button blocks have a lot of elements you can customize with code! You can alter the background, border, and text, and even create a custom hover effect using CSS.
The tutorials listed here will teach you how to use basic CSS to change the style of the button blocks on your Squarespace website.
Where you can learn more about Squarespace button blocks
Squarespace Made Simple
This mini course for beginners will teach you how to create your first Squarespace website. Lesson seven includes information about content blocks.
Squarespace Support Article
Learn more from the official Squarespace support blog