Did you know that you can change the active link in an accordion block to look like an actual clickable button, hover effects, and all?! It’s actually super simple and super customizable, and this tutorial will teach you how.

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'>https://insidethesquare.co/learn

The active link inside an accordion block description has a special code name (aka selector) that we can target with CSS. This means we can tell a computer to display it differently than the rest of the text.

If we give it a border and a background, and a hover effect, it can look and act like a regular button. How cool is that?!

Here is the code from this tutorial; be sure to adjust the color, size, and border to match your website style. The first code is for the button in its normal state and the second part is what it will look like on a hover.

.sqsblockaccordion a {
border: 1px solid #000;
background: pink;
color: #333;
padding: .5rem
}

.sqsblockaccordion a:hover {
border: 1px solid #000;
background: #eee;
}


RELATED VIDEOS
ow to have multiple buttons on an image block in Squarespace https://insidethesquare.co/squarespac...

How to customize the login button for a Squarespace member area https://insidethesquare.co/squarespac...

How To Add A Button To Your Announcement Bar https://insidethesquare.co/squarespac...

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'>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'>https://insidethesquare.co/css

Need some help? Visit ​https://insidethesquare.co/codehelp​ to see my current support options.

SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
WEBSITE → https://insidethesquare.co
NEWSLETTER → https://insidethesquare.co/email
INSTAGRAM →   / thinkinsidethesquare  
FACEBOOK →   / insidethesquare  
PINTEREST →   / 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 ♥