How To Customize List Item Buttons in Squarespace // Free Squarespace 7.1 Tutorial

Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn

In this tutorial you’ll learn how to create custom buttons for individual items in a list section in Squarespace.

🔗 Below are the main codes from this tutorial. Be sure to check out my blog at https://insidethesquare.co/list for some premade snippets if you want more help getting started!

🤔 To learn how to install this on a single page, check out this tutorial: https://youtu.be/kX6kRjCbzu8

🙋 If you need any help along the way, head on over to https://insidethesquare.co/code-help to see my current support options.

//–List Section Button Selector
.list-section-button

//–List Item Button Selector
.list-item-content__button

//–Individual List Item Button Selector – change up the number in the parenthesis
.user-items-list li:nth-child(1) .list-item-content__button

//–Add a border to just the section button
.list-section-button {border: 5px solid red}

//–Add a border to a single item button
.list-item-content__button:nth-child(1) {border: 5px solid red}

//–Change up the background color for a single item button – set of three
.user-items-list li:nth-child(1) .list-item-content__button {background-color:pink}
.user-items-list li:nth-child(2) .list-item-content__button {background-color:rgb(218,30,200)!important}
.user-items-list li:nth-child(3) .list-item-content__button {background-color:#50bdb8!important}

🔗 For more premade codes to customize your list section buttons, check out https://insidethesquare.co/list


🥳 Ready to give Squarespace a try? Use the code PARTNER10 for 10% off your first year (affiliate code): https://insidethesquare.co/partner10 ❤️

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

The term “Squarespace” is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥

#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips #squarespacehacks #designsquarespace #squarespacetip #howtousesquarespace #squarespacetutorial

You May Also Like