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. To turn your announcement bar on, head over to your main menu, and select Marketing from the list. Here you will see “Announcement Bar - click on that to head into the announcement bar options to enable it.

Now that it is enabled, check out the tutorial video below, and the code is below that, ready for you to copy and paste into your own website! If you have any questions or issues, let met me know in the comments below.


Use this code to turn the announcement bar link into a button. Remember, you can change the border width by editing the number before px (which stands for pixel) or changing the hex color code, #FFFFFF below, to match your own brand.

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

Ready to add a hover effect? Add the code below, and change the word red to any color that will match your own brand style!

.sqs-announcement-bar-text a:hover {
background:red;
border: 1px solid red!important;
}