This tutorial will show you how to use an image for a button background in Squarespace.

A few important things to note before you copy and paste this into your own site:

→ There is more than one way to do this! This is just one approach of many because code is super customizable. 

→ The codes I am using in the tutorial are for basic on page buttons; small, medium and large. It is SUPER important to know that there are so many other types of buttons! Form submit buttons, add to cart buttons, the button in the header of your website, etc etc - 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 recommend using an image you upload into your site 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!

Here are the steps from the tutorial:

1. Upload the image to your Squarespace website (Design > Custom CSS > Manage Custom Files)

2. Paste the code below in your Custom CSS (Design > Custom CSS)

3. Replace the text image-url-here with your own image url from the custom files section, making sure to leave the individual quotation marks around the url itself.

4. Pat yourself on the back for creating a unique site with some custom code you rockstar!

Here are the codes from the tutorial:

SMALL BUTTONS // TERTIARY

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

MEDIUM BUTTONS // PRIMARY

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

LARGE BUTTONS // SECONDARY

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

Add this line of code to make sure the button image wont change opacity on a hover:

SMALL BUTTONS // TERTIARY

.sqs-block-button-element--small:hover{opacity:1!important; }

MEDIUM BUTTONS // PRIMARY

Medium button - .sqs-block-button-element--medium:hover{opacity:1!important; }

LARGE BUTTONS // SECONDARY

Large Button - .sqs-block-button-element--large:hover{opacity:1!important; }

Add last but not least, add this line of code before the final bracket to give any PNG image a drop shadow, adjusting the px values and color codes to make it match your site style:

filter:drop-shadow(5px 5px 10px rgba(0,0,0,0.8)