Add A Button To The Announcement Bar In Squarespace

Squarespace TipsCSS & Code
Written By Toni Hill - Founder of The Square Genius

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;

}

10% off your squarespace subscription! Use code: GENIUS10

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…

 
Summary Block
This block has no content yet. Items you add to the page connected to this block will display here.
Featured
Toni Hill - Founder of The Square Genius

Hi, I’m Toni. My mission is to create powerful websites for charities, non profits and purpose-led organisations dedicated to making a positive impact on the environment, communities, animal welfare and many more. I am also a CSS enthusiast and love to create cool plugins for Squarespace websites.

https://www.thesquaregenius.com/author-toni-williams
Previous

How to add parallax scroll to squarespace 7.1

Next

Squarespace Vs Wordpress Which is Best?