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}


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;}


Pressed Down Color-block Effect

.list-item-content__button {border: 5px solid #000; box-shadow: -10px -10px #000}

.list-item-content__button :hover {box-shadow: none}