How to add a button to your announcement bar

With a little bit of code, you can turn a link in your announcement bar in your Squarespace website into a button.

I think it is a great feature for promoting an event or an opt-in, and I even use it right here on InsideTheSquare.co

Before you check out the video and copy+paste this code into your own site, I want to mention that Announcement Bar’s are a premium feature, accessible only for folks who have a business or commerce Squarespace subscription.

→ SUPER IMPORTANT: YOU GOTTA DO THIS PART FIRST!

To turn your announcement bar on, press the / forward slash key on your keyboard to open the program search, and search for announcement bar.

Squarespace changes our menus all the time, and that’s the easiest way to find it 😅

After you have located it, enable it and add your text and - this is the most important part - make part of that text a hyperlink. That’s what we will turn into a button using custom code.

Once you have that all set, check out the tutorial and codes below to turn that link into a button, hover effects and all!

This tutorial is a little outdated BUT the codes are still valid for both version 7.0 & 7.1 To add this code to your site, use the same / trick to locate your CSS pannel.

Here are the custom codes from this tutorial.

Remember, you can change any numerical value below to fit your site design and be sure to change the hex color code (#FFF below) to match your own brand!

/* InsideTheSquare: announcement bar button */
.sqs-announcement-bar-text a {
position: relative;
text-decoration: none!important;
margin: 5px!important;
padding: 4px!important;
border: 1px solid #FFF!important;
font-weight: 600!important;
line-height: 2.5em
}

Ready to add that hover effect?

Add the code below, and change the hex color codes in bold below to match your own brand colors!

/* InsideTheSquare: announcement bar button hover */
 .sqs-announcement-bar-text a:hover {
 background: #000;
 color: #FFF;
 border: 1px solid #FFF!important;
 }