How to Give Squarespace Buttons a Different Border Color with CSS

It’s easy to add a border to all your buttons in Squarespace in Site Styles (the little paintbrush in the upper right corner), but the problem is that it will always be the same color as the button text.

This tutorial explains how to use a DIFFERENT color for your button border than your button text, and it applies to all the buttons on your Squarespace website site-wide, primary, secondary, and tertiary, and to all shapes.

BEFORE ADDING CSS

AFTER ADDING CSS

How to Add a Different Color Border to Buttons in Squarespace

1. Go to Website > Pages > Custom Code > Custom CSS

2. Copy and paste the code below (scroll down) right here

3. Adjust the hex code to match your brand in BOTH places (one for your pages, and one for navigation)

4. Adjust the thickness to your liking in BOTH place, same as step 3

5. Save!

That’s it!

Code Snippet

/* Add border to all buttons */

 .sqs-block-button-element {
            border: 2px solid #000 !important;
        }

.header-actions .btn {
            border: 2px solid #000 !important; 
        }

---

If you liked this post, you’ll LOVE these:​​

• How to Add a Second Button to Navigation in Squarespace

• How to Change the Color of a Single Button in Squarespace

• How to Easily Add a Text Shadow Effect in Squarespace

• How to Make a Summary Block Auto-Scroll in Squarespace

• How to Add a Background Image to the Header in Squarespace

This page contains affiliate links

Like this post?

Pin It to Pinterest 👇