Change Squarespace Header Button Color & Style: Desktop & Mobile Code Tutorial

Is that button in your website's main navigation not quite popping the way you want it to? Good news – you can transform that basic navigation link into an eye-catching call-to-action that perfectly matches your brand style!

This isn't just about changing colors – in this tutorial, you’ll learn everything you need to know about styling your navigation button with CSS.

In this video, you'll learn how to easily create custom background colors, implement mobile-specific styling (because yes, it needs different code!), and add that satisfying hover effect that makes your button irresistibly clickable. The best part? You don't need to be a coding expert to make it happen. I'll walk you through each step, explaining not just the how but also the why, so you can customize these tweaks to match your site's unique style.

Whether you're looking to make your "Book Now" button stand out or want your "Shop" link to catch more eyes, this tutorial will help you create that perfect navigation CTA.

You’ll find the codes you need below, along with additional resources that can help you make Squarespace uniquely yours ✨

Here are the codes from this tutorial. Be sure to update the colors & other values to match the style of your own Squarespace website!
- -
Related Resources :
- - -
Chapters:
0:36 How to Add Navigation Buttons
1:00 Custom CSS in Squarespace
1:22 Change Button Background Color
2:00 Custom Font & Text Styling
2:29 Button Shape Customization
3:02 Mobile Navigation Button Fix
3:51 Create Custom Hover Effects
4:22 Advanced Button Styling Tips
4:38 Resources & Wrap-up
- - -
Codes:
Here are the codes from this tutorial. Be sure to update the colors & other values to match the style of your own Squarespace website!

.header-actions-action--cta a, .header--menu-open .header-menu-cta .btn{
background: orange!important;
color: #333!important;
text-transform: uppercase!important;
letter-spacing: 2px!important;
font-weight:bold!important;
}

Here is a second code example that includes the hover effect for desktop:
.header-actions-action--cta a, .header--menu-open .header-menu-cta .btn{
background: orange!important;
color: #333!important;
text-transform: uppercase!important;
letter-spacing: 2px!important;
font-weight:bold!important;
}
.header-actions-action--cta a:hover{
background: red!important;
opacity: 1!important;
}

- - -
The term Squarespace is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace Inc. The accuracy of this information is subject to change. #SquarespaceCustomization #WebDesignTips #CSSforBeginners #squarespacetutorial #SquarespaceCSS