Add A Button To The Announcement Bar In Squarespace

One of my favourite CSS tricks here! Adding a button into your Squarespace announcement bar! Check out the extremely quick guide below. This code will work on both Squarespace 7.0 and 7.1 versions.

Go to > Design, Custom CSS then paste the below code. Use the colour codes to change your buttons’ background and text colours.

---

Copy & paste the below code

//Announcement bar button

.sqs-announcement-bar-text a {

position: relative;

text-decoration: none!important;

margin: 2px!important;

padding: 5px!important;

border: 1px solid #83a5d5!important;

font-weight: 600!important;

line-height: 2.5em;

background-color: #83a5d5;

font-size: 12px;

border-radius: 7px}

Add a hover colour effect…

//Announcement bar button hover

.sqs-announcement-bar-text a:hover {

background: #3e4c60;

color: #83a5d5;

border: 1px solid #4d5f7b !important;

}

Did I help you? Consider buying me a coffee as thanks!

I hope you found this Squarespace css hack useful. For more hacks sign up to my newsletter…