Change the Newsletter Form Button Colour

What does this code do?

This code snippet will allow you to change the color of a newsletter form button.

Code Snippets

Squarespace 7.0

Copy and paste this code into Design > Custom CSS

/* Newsletter Form Button */
.sqs-block-newsletter .newsletter-form-button {
  background-color: black !important;
  border: black;
  color: white !important;
}

/* Newsletter Form Button on Hover */
.sqs-block-newsletter .newsletter-form-button:hover {
  background-color: white !important;
  border: black;
  color: black !important;
}

To target a specific form block add one of the following selectors in front of .sqs-block-newsletter

/* One Page */
#COLLECTIONID

/* One Section */
#PAGEID

/* One Form Block */
#BLOCKID

Squarespace 7.1

You can set the newsletter form block colour in Design > Color. To change the colour of a specific form copy and paste the following into Design > Custom CSS.

/* Newsletter Form Button */
SELECTOR .black .sqs-block-newsletter .newsletter-form-button {
  color: black !important;
  background-color: white !important;
  border: 1px solid white;
}

/* Newletter Form Button on Hover */
SELECTOR .black .sqs-block-newsletter .newsletter-form-button:hover {
  color: white !important;
  background-color:black !important;
  border: 1px solid white;
}

You will need to change .black to match the theme of the section the form is in.

White Minimal = .white

White Bold = .white-bold

Light Minimal = .light

Light Bold = .light-bold

Dark Minimal = .dark

Dark Bold = .dark-bold

Black Minimal = .black

Black Bold = .black-bold

Accent Dark = .bright

Accent Light = .bright-inverse

Then change the world SELECTOR to match one of the selectors below.

/* One Page */
#COLLECTIONID

/* One Section */
#COLLECTIONID #page .page-section:nth-of-type(1)

/* One Form Block */
#BLOCKID

How To Use It

1. Copy and paste the code as indicated above.

2. Choose the selector that matches your situation.

3. To learn how to find a collection id, page id, or block id check out our Start Here guide.

4. If targeting one section in Squarespace 7.1, change the 1 to match the section you are trying to change.

5. Then change the colours to your liking.