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
