How to use an image for a button background in Squarespace

Buttons are clickable calls to action that should be as unique as the rest of your website! Instead of a solid color, you can use custom code to replace the background with your own image. Before you dig into the codes below, there is some important info you need to know:

→ I recommend using an image you upload to your website’s custom files so you can make sure you have access to it; using an image hosted by someone else means that the owner could take it down or change it without you knowing, messing up all your hard work! I’ve included steps on how to do this in the instructions below.

→ The codes in this tutorial are for basic on page buttons; primary, secondary, and tertiary. It is SUPER important to know that there are many other types of buttons! Form submit buttons, add to cart buttons, the button in the header of your website. . . the list goes on. 🫠 Each one of these buttons goes by a unique code name and you need to know that name to assign the background image to that button. I’ll include some examples below. For a full list of selector names for Squarespace, refer to the most up-to-date collection available at insidethesquare.co/css

Before we create the code, let’s add the image to your website!

Under the website menu, select the pages option and then select website tools. Here you’ll be able to click on Custom CSS. CLick on the custom files dropdown and drag the image file from your computer to your custom files list. Squarespace will add that file to your site and you’ll see a small square thumbnail preview next to the file name when it’s done.

After you’ve added your image, you’ll need to add this cutsom code below to your CSS pannel directly underneath the custom files dropdown.

/* primary buttons */
.sqs-block-button-element--primary{
background-color:transparent!important;
background-image:url(‘image-url-here');
background-size:contain!important;
background-position:center;
background-repeat:no-repeat!important
}

/* secondary buttons */
.sqs-block-button-element--secondary{
background-color:transparent!important;
background-image:url(‘image-url-here');
background-size:contain!important;
background-position:center;
background-repeat:no-repeat!important
}

/* tertiary buttons */
.sqs-block-button-element--tertiary{
background-color:transparent!important;
background-image:url(‘image-url-here');
background-size:contain!important;
background-position:center;
background-repeat:no-repeat!important
}

You’re going to see a syntax error, and that’s okay! It means we aren’t done yet 😉

Replace the text image-url-here in the code below with your own image URL from your custom files. It should automatically appear when you remove the filler text, but if it doesn’t, click on custom files to open the list and click on the image in the list to add the URL to your code.