How to change the color of the Post Comment button

If you're using Squarespace's commenting system on your blog, you'll notice you can't change the color of the "Post Comment" black button through your style editor.

However, today I want to show you a super easy code trick that you can use to do that and have the button match the rest of your site!

 

Changing the Post Comment button color in Squarespace

First of all, let's see how we can target this button through its class.

Finding the class for the Post Comment button wrapper

 

There's a wrapper holding the entire button with a class of .comment-btn-wrapper and inside that wrapper we can see a <span> that constitutes our button with a bunch of classes including one of .comment-btn :

Finding the class for the Post Comment button in Squarespace

 

We could use just the second one, but I'm not sure if there's nothing else with this class on the site, so I want to use the ancestor's class as well to make it more specific. The chances of a different element of having exactly both classes are much slimmer.

So, my selectors will look like this once I put them inside my Custom CSS Window:

.comment-btn-wrapper .comment-btn {
}
Adding the Post Comment button in the CSS Window

 

Now, let's change the background color shall we? I'll be setting it as "teal"

.comment-btn-wrapper .comment-btn {
  background: teal;
}
Changing the Post Comment button color in Squarespace

 

Lovely! Now how about we change the font family and make it bold too?

In this case I had to use the !important rule to override the original styles since my browser wasn't picking up the changes.

.comment-btn-wrapper .comment-btn {
  background: teal;
  font-family: montserrat !important;
  font-weight: bold !important;
}
Changing the font of the Post Comment button in Squarespace

 

Alright! You can leave it like this if you like but I want to take it a step further and change the hover mode of this Post Comment button as well.

 

Adding a hover mode to the Post Comment button

All I'm going to do is use the :hover pseudo-class to set the same background color to the button on mouseover and lower the opacity so it looks lighter.

.comment-btn-wrapper .comment-btn:hover {
  background: teal;
  opacity: .6;
}
Adding a hover mode to the Post Comment button in Squarespace

 

And that's it! That's how you can change the color of your Post Comment button in Squarespace and give it a nice and inviting hover mode.

 

Until next time,

B.

 

LIKED THIS POST?

I'd love it if you shared!


More Squarespace tips & tricks this way