Button design can be a little limiting in a Squarespace site, but this tutorial will help you change that! We’ll take a standard on-page button and add a custom icon to it in two unique ways.
—
This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: https://insidethesquare.co/learn
—
In this tutorial, we are going to add an icon after the text to a button in a Squarespace website. Sounds simple, and it is! Well, kind of 😅
The tricky part is saying the right name for the right button!
There are over 15 different types of buttons with unique names in Squarespace.
For newsletter buttons, list section buttons, image buttons, and plenty of others you’ll need to use its specific code name (selector) in your code.
If you want to add an icon to all the small, medium, and large buttons background colors, this code will do that for you:
.sqs-block-button-element:after{content:”→”}
Here is a link to my list of unicode characters compatible with most fonts in Squarespace: https://insidethesquare.co/unicode
If you want to isolate just the small, add “–small” to the end of the code name (Selector) above, like this: .sqs-block-button-element–small:after{content:”→”}
If you only want to change a single button, you can add the block ID to the start of the code.
#block-123456 .sqs-block-button-element:after{content:”→”}
If you don’t know the block ID, you can use this chrome extension to find out what it is. InsideTheSquare is not affiliated with this extension or its creators, just a fan! https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde
To use a custom font, try this code:
.sqs-block-button-element:after{
content: “m”;
font-family: ‘Your-Font-Here’!important;
}
Here is a tutorial on how to install a custom font in Squarespace: https://insidethesquare.co/squarespace-tutorials/custom-font
– – –
🔗 RELATED VIDEOS 🔗
How To Target One Thing in Squarespace with Code: https://youtu.be/h8qfZdaATbU
How to use a custom font in Squarespace: https://www.youtube.com/A0a-eiP1iTc
How use an image for a button background in Squarespace https://youtu.be/vvaPZW72A_w
– – –
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 – You’ll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
🔗 PARTNER10 → https://insidethesquare.co/partner10
– – –
🤩 Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css
—
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
—
🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → https://www.instagram.com/thinkinsidethesquare
👍 FACEBOOK → https://business.facebook.com/insidethesquare
📌 PINTEREST → https://www.pinterest.com/insidethesquare
—
The term “Squarespace” is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
