How to Add a Button on Squarespace: The Easy Way (+3 Tweaks)

A well-placed button on a website is fantastic for drawing the eye and encouraging engagement.

You can use a button to get people to buy your products, sign up for your newsletter, or send over an enquiry.

Here’s how to add a button on Squarespace in two ways in just two minutes, plus some awesome tweaks for making your buttons stand out even more!

How to add a button to the Squarespace header

Did you know you can add a button to your Squarespace header? It’s great for encouraging people to convert on your site – we use a button on our header to signpost visitors to sign up for Spark Plugin! Plus, as your header appears on every page of your website, it’s an easy way to drive clicks and conversions.

Here’s how to add a button to your Squarespace header or navigation bar:

Step 1

Go into edit mode and hover over your header. Click edit site header, and you’ll be taken to the header menu.

Step 2

Next, click on elements and switch the button toggle to on. Add the text you want to appear on your button and where you want to link to. You can link to a page, an external website, an email address, or a phone number – it’s entirely up to you.

Leave the menu, save your changes, and enjoy your new, refreshed header!

How to add a button in Squarespace using Fluid Engine

As well as adding a button to your header, you can add a button to any section of your site too. Here’s how to add a button to Squarespace using the Fluid Engine editor.

Step 1

Go to the webpage you want to add a button to and go into edit mode.

Step 2

Go to the section you want to add your button to and click the add block button in the top left-hand corner. Choose button.

Drag and drop where you want your button to appear – the great thing about Fluid Engine is that you can layer buttons over other elements like images. When you’re happy with the layout, click the pencil icon to add your text and link.

Not using Fluid Engine just yet? Here’s how to add a button to Squarespace using classic editor.

Bonus: Enhance your Squarespace buttons with these nifty tweaks

You can make some amends to your Squarespace buttons, like changing the color or font, but if you want them to stand out, Spark Plugin is the answer!

The code-free way to edit your buttons, Spark Plugin is easy to use. Just choose the customization you want, and you’re good to go! Here are three button tweaks you’ll love:

1. Add a gradient

Can’t choose between two different button colors? Why not have both? This cool gradient transforms your call-to-action button and encourages your web visitors to find out more.

2. Make your button hover

Did that button just move?! With this customization, it definitely did! Add a hovering animation to give your webpage an air of mystery.

3. Use a shadow

The simple customizations are the best – and with this shadow effect, you can add a refined element of gravitas to your chosen web page.

p.s Looking for more button tweaks? Check out this article.