How use an image for a button background in Squarespace - 7 & 7.1 // Squarespace CSS Tutorial

---
---
---
---
This tutorial was recorded in my 7.1 demo site but also works for older versions of Squarespace!
---
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.

→ 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:
①Upload the image to your Squarespace website (Design → Custom CSS → Custom Files)
② Paste the code below in your Custom CSS (Design → Custom CSS)
③ 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.
④ Pat yourself on the back for creating a unique site with some custom code you rockstar! 🥳

→ Here is the code for small buttons:
.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}

→ Here is the code for medium buttons:
.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}

→ Here is the code for large buttons:
.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 won't change opacity on a hover:
Small button
.sqs-block-button-element--small:hover{opacity:1!important; }

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

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

→ 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)

---
---
---
---
The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥
---
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips

[InsideTheSquare]

⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!

[karinvonmay]

This is fantastic. The way you laid everything out was clear and concise. Thank you.

[WeavingQiwithTenaya]

This is absolutely amazing!!! What a gift~ Thank you and I can't wait to watch more of your tutorials!

[abixedits]

Wow wow wow speechless! You are an amazing teacher! thanks

[tramhuynh]

Thank you so much! You are a very good teacher <3

[jaimemkirby]

Thank you so much! This is exactly what I was wanting.

[jennifercurtice]

This is the coolest thing ever and the solution I've been looking for! Thanks for creating such helpful and amazing videos!

[madmex]

Love your videos, you're a great speaker! Is there a way to make the text transparent too so just the image is showing? I'm basically trying to make the nav button just a custom PNG. (latest SS version) cheers!

[JirocTheViking]

Hello. Can you tell me how I can change the form button? I'd like to make it match the other buttons on my site. Skål!

[JaiSequoia]

this is great thanks @InsideTheSquare Question. If one was doing this same effect as in your video (gold brush stroke) and wanted the affect on all 3 buttons... isn't there a way to amalgamate all that CSS so it's nice and tidy and not repeated 3 times for each button size? I'm trying to get tidier with my CSS so thought I'd ask. Cheers

[rachelfrederickmoura]

Is there a way you can zoom in to the codes? I can not read it

[AnnaRoger-nmyc]

@insidethesquare can this be done for radio buttons? really interested in that such that the radio button clicked is an image??

[blythekunderman]

How big should the image be? I'm having difficulty getting my image to be big enough. Thanks!

[gabrielle]

This is great! Is there a way to isolate the image background to a button in the header?

[motherpuppersstudio]

Is it possible to use just the image as a button so without any text on it?

[rafidjokosoetono]

Is this possible for individual buttons? Let's say I want a different background photo for each button I have. The code that you showed changes it for all the buttons of the same type I believe.

[laurencalicutt]

How do you put a button on an image ? For instance a graphic with purses and the button underneath says shop now (but it's on that image)

[shalenawhite]

I cant seem to get this to work. I tried this as well as the code in the css cheat sheet and the error message I got back was:
expected ')' got '''
Can you assist please?

[JoseAngelFlores]

Hi, I love your videos. This code gives an error "expected ')' got '''

[skgirl]

Just a clarification: To get the codes for the other types of buttons i have to buy your cheat sheet?