How to customize your website header button

Oct 29

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.

I'll show you 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 under the video, 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!

/* header menu button code from insidethesquare.co */
.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 menu button code from insidethesquare.co */
.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;
}