Add an Outline to Buttons

What does this code do?

This code snippet will allow you to add an outline to buttons.

Code Snippets

Copy and paste the appropriate code into Design > Custom CSS

Squarespace 7.0

/* Button Blocks */
.sqs-block-button-element {
  outline: 3px solid red;
}

/*Button in Secondary Navigation in Header */
.Header-nav--secondary a {
  outline: 3px solid red;
}

/* Image Button */
.image-button a {
  outline: 3px solid red;
}

/* Newsletter Button */
.newsletter-form-button {
  outline: 3px solid red;
}

/* Add to Cart Button */
.sqs-add-to-cart-button {
  outline: 3px solid red;
}

/* Form Button */
.sqs-block-form .button {
  outline: 3px solid red;
}

To target a specific button, add one of the following selectors in front of the .CLASSNAME

/*Buttons on One Page */
#COLLECTIONID

/* Buttons in One Section */
#PAGEID

/* One Button */
#BLOCKID

Squarespace 7.1

/* Button Blocks */
.sqs-block-button-element {
  outline: 3px solid red;
}

/*Button in Header */
.header-actions-action--cta {
  outline: 3px solid red;
}

/* Image Button */
.image-button a {
  outline: 3px solid red;
}

/* Newsletter Button */
.newsletter-form-button {
  outline: 3px solid red;
}

/* Add to Cart Button */
.sqs-add-to-cart-button {
  outline: 3px solid red;
}

/* Form Button */
.sqs-block-form .button {
  outline: 3px solid red;
}

To target a specific button, add one of the following selectors in front of the .CLASSNAME

/* Buttons on One Page */
#COLLECTIONID

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

/* One Button */
#BLOCKID

Customize

To have a bit of space between the button and the outline add the following code in between the brackets.

outline-offset: 3px;

If you do not want a solid line around the button, you can change the word solid to one of the following options.

• dotted

• dashed

• double

• groove

• ridge

• iset

• outset

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 customize the spacing, style, and colour of the outline.

6. If one of the codes above is not working, try adding !important before the semicolon.