Add a Shadow to Buttons

What does this code do?

This code snippet will allow you to add a drop shadow to buttons.

Create Your Shadow

Go to Box Shadow CSS Generator by CSmatic and create the shadow you would like to appear on your site. Save the code created by the generator.

Code Snippets

Copy and paste the appropriate code into Design > Custom CSS

Squarespace 7.0

/* Buttons Blocks */
.sqs-block-button-element {
  CSS CODE FROM GENERATOR HERE
}

/*Button in Secondary Navigation in Header */
.Header-nav--secondary a {
  CSS CODE FROM GENERATOR HERE
}

/* Image Button */
.image-button a {
  CSS CODE FROM GENERATOR HERE
}

/* Newsletter Button */
.newsletter-form-button {
  CSS CODE FROM GENERATOR HERE
}

/* Add to Cart Button */
.sqs-add-to-cart-button {
  CSS CODE FROM GENERATOR HERE
}

/* Form Button */
.sqs-block-form .button {
  CSS CODE FROM GENERATOR HERE
}

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 {
  CSS CODE FROM GENERATOR HERE
}

/*Button in Header */
.header-actions-action--cta {
  CSS CODE FROM GENERATOR HERE
}

/* Image Button */
.image-button a {
  CSS CODE FROM GENERATOR HERE
}

/* Newsletter Button */
.newsletter-form-button {
  CSS CODE FROM GENERATOR HERE
}

/* Add to Cart Button */
.sqs-add-to-cart-button {
  CSS CODE FROM GENERATOR HERE
}

/* Form Button */
.sqs-block-form .button {
  CSS CODE FROM GENERATOR HERE
}

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

How To Use It

1. Go to Box Shadow CSS Generator and create your shadow.

2. Copy and paste the code as indicated above.

3. Choose the selector that matches your situation.

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

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