You can have three unique button styles in Squarespace, but to change the look of a button on a hover, you’ll need a little bit of custom CSS, and that’s exactly what this tutorial will teach you!
—
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
—
You can change all kinds of things about a button on a hover, like the border, background, shadow and font styles. In this tutorial, you’ll learn what kind of selectors to use to target specific button types, how to change one individual button, and more.
Here are the selectors from the video:
All button blocks: (.sqs-block-button-element:hover)
Primary: (.sqs-button-element–primary *or*
.sqs-block-button-element–medium)
Secondary: (.sqs-button-element–secondary *or*
.sqs-block-button-element–large)
Tertiary: (.sqs-button-element–tertiary *or*
.sqs-block-button-element–small)
To learn about border styles, visit https://insidethesquare.co/borders
To learn about color options, visit https://insidethesquare.co/colors
Here is a link to the chrome extension used in the video; I am a fan but not affiliated with this extension or its creators: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff
Here is the full code example I used in the tutorial: .sqs-block-button-elment:hover {border-color: purple!important; background-color: #50bdb8!important; box-shadow: 5px 5px 15px 10px #DDD!important; font-weight: bold!important}
– – –
🔗 RELATED VIDEOS 🔗
New Squarespace Button Styles: Primary, Secondary, Tertiary Button Options https://youtu.be/7Pk7-3gj4ZE
How to Change the Color of the Header Button on a Hover: https://youtu.be/dMHUh7OsiCE
– – –
💸 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 ♥
