Use an Image for the Button Background
What does this code do?
This code snippet will allow you to use an image as a button’s background.
Upload Your Image
First, you will need to upload the image you want as your background. A great place to get the gold foil and other patterns is from https://www.pexels.com/. Upload this image to Design > Custom CSS > Manage Custom Files.
SEO Tip: Be sure to compress this image before you upload it or this will slow down your website. It should not be any bigger than 500KB.
Custom CSS
There are a ton of different types of buttons in Squarespace and they all have different selectors. Be sure to follow the instructions below if you need to target multiple different types of buttons.
Page Buttons (Button Blocks)
Use the following code to target the small, medium, and large button blocks.
Copy and paste the appropriate code into Design > Custom CSS
/* All Page Buttons */
.sqs-block-button-element {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat;
background-size: 100% 100% !important;
}
/* All Large Buttons */
.sqs-block-button-element--large {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat;
background-size: 100% 100% !important;
}
/* All Medium Buttons */
.sqs-block-button-element--medium {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat;
background-size: 100% 100% !important;
}
/* All Small Buttons */
.sqs-block-button-element--small {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat;
background-size: 100% 100% !important;
}Then delete the words IMAGEURL, place your cursor between the brackets, and click on the image you uploaded in Manage Custom Files. This will insert the image link in between the brackets.
Header Button
Use the following code to target the button in your header.
Copy and paste the appropriate code into Design > Custom CSS
/* Button in the Header */
.header-actions-action--cta a {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat;
background-size: 100% 100% !important;
}Then delete the words IMAGEURL, place your cursor between the brackets, and click on the image you uploaded in Manage Custom Files. This will insert the image link in between the brackets.
Image Buttons
Use the following code to target the buttons in your images.
Copy and paste the appropriate code into Design > Custom CSS
/* All Image Buttons */
.image-button a {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat !important;
background-size: 100% 100% !important;
}
/* Poster Image Buttons */
.design-layout-poster .image-button a {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat !important;
background-size: 100% 100% !important;
}
/* Card Image Buttons */
.design-layout-card .image-button a {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat !important;
background-size: 100% 100% !important;
}
/* Overlap Image Buttons */
.design-layout-overlap .image-button a {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat !important;
background-size: 100% 100% !important;
}
/* Collage Image Buttons */
.design-layout-collage .image-button a {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat !important;
background-size: 100% 100% !important;
}
/* Stack Image Buttons */
.design-layout-stack .image-button a {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat !important;
background-size: 100% 100% !important;
}Then delete the words IMAGEURL, place your cursor between the brackets, and click on the image you uploaded in Manage Custom Files. This will insert the image link in between the brackets.
Form Buttons
Use the following code to target the button in your forms.
Copy and paste the appropriate code into Design > Custom CSS
/* Form Buttons */
.sqs-block-form .button {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat !important;
background-size: 100% 100% !important;
}Then delete the words IMAGEURL, place your cursor between the brackets, and click on the image you uploaded in Manage Custom Files. This will insert the image link in between the brackets.
Newsletter Button
Use the following code to target the button in your newsletter.
Copy and paste the appropriate code into Design > Custom CSS
/* Newsletter Form Buttons */
.newsletter-form-button {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat !important;
background-size: 100% 100% !important;
}Then delete the words IMAGEURL, place your cursor between the brackets, and click on the image you uploaded in Manage Custom Files. This will insert the image link in between the brackets.
Tock Button
Use the following code to target your Tock Reservations and Events buttons.
Copy and paste the appropriate code into Design > Custom CSS
/* Tock Buttons */
.TockButton {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat !important;
background-size: 100% 100% !important;
}Then delete the words IMAGEURL, place your cursor between the brackets, and click on the image you uploaded in Manage Custom Files. This will insert the image link in between the brackets.
Add to Cart Button
Use the following code to target the add to cart button for your products.
Copy and paste the appropriate code into Design > Custom CSS
/* Add to Cart Buttons */
.sqs-add-to-cart-button {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat !important;
background-size: 100% 100% !important;
}Then delete the words IMAGEURL, place your cursor between the brackets, and click on the image you uploaded in Manage Custom Files. This will insert the image link in between the brackets.
Member Area Button
Use the following code to target the sign up button for your member area block.
Copy and paste the appropriate code into Design > Custom CSS
/* Sign Up Buttons */
.sqs-block-member-area .join-button {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat !important;
background-size: 100% 100% !important;
}Then delete the words IMAGEURL, place your cursor between the brackets, and click on the image you uploaded in Manage Custom Files. This will insert the image link in between the brackets.
Event Buttons
Use the following code to target the View Event buttons on your event page.
Copy and paste the appropriate code into Design > Custom CSS
/* Event Buttons */
.eventlist-button {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat !important;
background-size: 100% 100% !important;
}Then delete the words IMAGEURL, place your cursor between the brackets, and click on the image you uploaded in Manage Custom Files. This will insert the image link in between the brackets.
Other buttons?
If there are any other buttons that you would like added to this page, be sure to submit a request for it to be added.
Multiple Buttons
If there are multiple types of buttons you would like to target, you can use a comma between each selector. For example, if I would like to target my medium and large buttons, instead of using…
/* All Large Buttons */
.sqs-block-button-element--large {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat;
background-size: 100% 100% !important;
}
/* All Medium Buttons */
.sqs-block-button-element--medium {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat;
background-size: 100% 100% !important;
}I could make my code more efficient by using a comma like this…
/* All Large and Medium Buttons */
.sqs-block-button-element--large, .sqs-block-button-element--medium {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat;
background-size: 100% 100% !important;
}Buttons on One Page or Section
If you would only like to target the buttons on one page, section, or block, you can add one of the following to the beginning of the above code.
/* One Page */ #COLLECTIONID /* One Section */ #COLLECTIONID #page .page-section:nth-of-type(1) /* One Block */ #BLOCKID
For example, if I wanted to target all of the large buttons on one page I would use…
/* All Large Buttons on One Page*/
#COLLECTIONID .sqs-block-button-element--large {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat;
background-size: 100% 100% !important;
}Take note that if you are using a comma to target multiple types of buttons, you should wrap the code in brackets or put the collection id for each selector. For example, if I wanted to target all of the large and medium buttons on one page, I would use…
/* All Large and Medium Buttons on One Page */
#COLLECTIONID {
.sqs-block-button-element--large, .sqs-block-button-element--medium {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat;
background-size: 100% 100% !important;
}
}or…..
/* All Large and Medium Buttons on One Page */
#COLLECTIONID .sqs-block-button-element--large, #COLLECTIONID .sqs-block-button-element--medium {
background: linear-gradient(transparent, transparent), url(IMAGEURL) repeat;
background-size: 100% 100% !important;
}Otherwise the collection id would only apply to the first item before the comma.
How To Use It
Copy and paste the code as indicated above.
Choose the selector that matches your situation.
To learn how to find a collection id or block id check out our Start Here guide.
If targeting one section in Squarespace 7.1, change the 1 to match the section you are trying to change.
Then delete the words IMAGEURL, place your cursor between the brackets, and click on the image you uploaded in Manage Custom Files. This will insert the image link in between the brackets.
