Custom Styling Buttons with CSS in Squarespace

Sometimes the standard Squarespace settings don’t do the trick! Customize your website buttons with custom coding. Switch up the colors, borders and more through this simple code.

In this video I cover:

• Ideas for various buttons and ways to style them on your website

• The specific code used to achieve this look (see below)

Show notes

0:18 Adding code to custom CSS

0:50 Changing the size of your button

1:06 Changing the background color of your button

1:37 Changing the border radius of your button

2:45 Changing the border of your button

3:50 Changing the text color of your button

4:13 Changing the width of your button

.sps-block-button .sps-block-button-element—small {
  background-color: pink;
  border-radius: 50px;
  border: 2px solid black;
  width:75%;
}

.sps-block-button .sps-block-button-element—small:hover {
  border: 2px solid black;
  background-color: white;
  color: black;
}

---

The following information was created for use with templates made with Squarespace 7.0.
Stay tuned for more tips and tricks for the new 7.1 platform!

---