In this tutorial, we are going to change the background color of individual buttons in Squarespace, creating a page section with two different button colors.

Squarespace just released a brand new feature for page sections in version 7.1 called Section Divider.

I recorded a new tutorial, where you'll learn how to access these new design options and what your settings are.

A few things to note before you use the codes below:

✨ This is a link to the free Chrome extension I use in the video for grabbing the block ID’s. InsideTheSquare is not affiliated with this extension or it’s creators, just a fan!

👩🏼‍💻 I created this using my Squarespace 7.1 demo site but this technique will work in version 7 too.

🤷‍♀️ CSS is SUPER customizable; this is just one approach to creating this look!

🤩 Buttons are also SUPER customizable! Learn about all your options here: insidethesquare.co/buttons

To change the button color, use the block id followed by the letter “a” and then the code to change its background color. Use the block id to name it then use the letter “a” to single out the “active link” because here is a little secret - a button won't share a block with anything else, so it will be the only active link in there! Example codes from this tutorial are below.

This example changes the background color:

#block-123456 a {background-color:orange!important}

You can use this same block ID trick to give it a hover effect too:

#block-123456 a:hover{background-color: orange!important}

To combine different button names in the same line of code so they have the same background, separate them with a comma like this:

#block-123456 a:hover, #block-798012 a:hover{background-color: orange!important}

If you don’t know the block ID, you can use this Squarespace Block ID Chrome extension to find out what it is. InsideTheSquare is not affiliated with this extension or it’s creators, just a fan!