Working With Buttons in SquareSpace

Buttons are a great way to create a “call to action” on your website. Whether you’re adding a button to a brand new page, or editing an existing button, I hope this walkthrough will be helpful for you as you edit your new Squarespace website!

---

1. Press the “G” key on your keyboard to bring up the design grid.

1. Click on the button itself and click the Edit icon.

2. In the Content area, you can add your button text and set the link.

   • Text: enter the text you’d like to appear on your button.

   • Attach Link: You have the option to select a URL, File, Email, or Phone.

     • URL: For an outside website, simply copy and paste the full web address into the field. You can also toggle the button to have the URL open in a new tab. To link to a page within your website, choose from the list that appears, or press the “/” key to type in the name of the page. Typically you will NOT want to have the link to your own site open in a new tab, so leave that toggled off.

     • File: Here you can upload a file or look for a file you’ve previously uploaded. 

     • Email: Enter the recipient’s address (typically yours), along with the subject line and any content you want to populate the message with. 

     • Phone: Enter the phone number and choose if you want to open up the client’s phone dialer or messaging app. It won’t automatically place a call/text.

3. In the Design area you can change the look of the button. Some characteristics of the button have been preset by your designer in the “Styles” section of your site’s settings, and this is to ensure that your buttons keep a consistent look across your site. However, there are some things you can do here depending on the layout of your page.

   • Three types of buttons (Primary, Secondary, and Tertiary)

   • Choose Fit or Fill

     • Fit: The “Fit” setting uses the padding settings that are specified in the Styles for your site. This means that there’s a set amount of space that surrounds the text of your button and no matter how big you make the button container, the button will not change size. With the “Fit” option, you also have the ability to change the alignment of the button within it’s container.

     • Fill: The “Fill” option will make the button fill the entire container. This is limited to the design grid, as your container will snap to the grid, leading to a really big or really small button. So for this reason, I prefer to use the “Fit” option. 

4. Press the “G” key to make the design grid disappear and click the Save button to save your page.

5. You can now preview the changes you’ve made to make sure your button works the way you intended. Be sure to check the mobile layout as well!