How to have multiple buttons on an image block in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

Sometimes one button just isn't enough!

In this tutorial, we'll use some custom code to create the look of multiple buttons for an image block, using the active link option in the text.

Modify the codes below to make those links inside image subtitles look like actual buttons.

Try adjusting the background color, giving it a border, or anything else you want to see.

You can have multiple buttons on one line, or separate them into their own individual lines!

→ To download the free PDF with image block code names, visit: insidethesquare.co/image

Here is the code that I shared in the video:

.sqs-block-image a{
text-decoration: none;
background: pink;
padding: .5rem;
border-radius: 10px;
}

This part is the hover effect:

.sqs-block-image a:hover {
background: red;
color:#FFF!important;
box-shadow: 5px 5px 10px #222 }