How to customize list section buttons in Squarespace

Aug 3

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

In this video you’ll learn how to use custom code to change the style of an individual list item button.

The main selectors are below, along with some pre-made codes to inspire you!

You can customize them, combine them, or use them as-is directly on your own Squarespace site.

→ Check out this tutorial to learn how you can install this code on a single page in your Squarespace website.

Here are the code names (aka selectors) from the tutorial video above:

Button for the entire list section:

.list-section-button

Individual Item Button:

.list-item-content__button

Specific Item Button:

.user-items-list li:nth-child(1) .list-item-content__button

Pre-made Button Codes

These codes are for list items, but you can use them for individual items or the section button by replacing the text .list-item-content__button with one of the selectors above.

Shadow Change on Hover: 

.list-item-content__button{
box-shadow: 0px 5px 15px rgba(0,0,0,0.3)!important}
 .list-item-content__button:hover{
box-shadow: 0px 2px 5px rgba(0,0,0,0.3)!important; opacity:1!important; background-color:#000!important} 

EXAMPLE BUTTON

Border to Filled on Hover:

.list-item-content__button {
background-color: rgba(255,255,255,0)!important; border-top: 3px solid #000!important; border-bottom: 3px solid #000!important; color:#000!important} 
.list-item-content__button:hover{
background-color:#000!important; color:#FFF!important;} 

EXAMPLE BUTTON

Pressed Down Color-block Effect