Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn
—
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10
—
💕 Love this free Square space tutorial? You can donate via Paypal to help support my YouTube Channel https://www.paypal.com/paypalme/insidethesquare
—
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.
→ 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. In my CSS cheat sheet, you can find button names unique for specific themes, like 7.1 header buttons, and major elements like forms, blogs, and more. To download a copy of the cheat sheet visit https://insidethesquare.co/css
→ 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)
—
🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 https://InsideTheSquare.co/css
—
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10
—
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
—
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
