How to add a floating button on Squarespace with CSS code

How to add a floating button on Squarespace with CSS

Sometimes it’s great to have a pop up or an annoucement bar to attract viewers to certain pages, but these can be a little over kill in some cases. So how about creating a floating button on the side of your Squarespace website instead? This is slightly more subtle and the button sticks onto the page wherever the viewer has landed.

To create a floating button on your Squarespace website add this simple piece of CSS code below…

So here’s what you need to do to add a floating button on Squarespace...

---

Step 1

Add the below code into your injection code in the Footer section

Go to Settings > Developer Tools > Code injection > Scroll down to the Footer section and paste the below code. Note that the text highlighted in bold is where you need to replace it with your URL of where you want the button to click through to, and also your button name.

---

<script src=“https://code.jquery.com/jquery-3.6.0.js"></script>

<div class="float">

  <a href=YOUR-URL-HERE>

<h9 style="color:white">BUTTON NAME</h9>  </a>

</div>

---

Step 2

Add the CSS code to style your floating button

Add the below code to your custom css. Go to > Design > Custom CSS and paste the code. Be sure to change the following word in red to match your tag exactly: .grid-item.tag-new. If your tag is set to ‘sale’ you would change this part of the code to: .grid-item.tag-sale

---

CSS code for floating button on Squarespace

//Floating Side Button

.float  {

   position: fixed;

   opacity: 0.9;

   top: calc(55%);

   right: 0;

   z-index: 20000;

   background-color: #79c3ea; //Change this to your color

border-radius: 0px; //Round the edges on your button

border: 1px solid #ffff !important;; //Add a border

   white-space: nowrap;

   text-align: center !important;

   height: 20px;

   font-family: ; //Add font family if you like

   font-weight: bold;

   font-size: 20px;

   padding-top: 5px;

   padding-right: 10px;

   padding-bottom: 10px;

   padding-left: 10px;

   -moz-transform: rotate(-90deg);

   -ms-transform: rotate(-90deg);

   -o-transform: rotate(-90deg);

   -webkit-transform: rotate(-90deg);

   transform-origin: bottom right;

}

Add this part if you want a ‘hover’ color effect

//Hover effect

.float:hover  {

  background-color: #2C343C; }

Add this part if you don’t want your button to show on a mobile device

//Mobile display

@media screen and (max-width: 930px) {.float {display: none ;}}

---

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