How to Add a Floating Call to Action Button in Squarespace

Jan 11

If you want a website visitor to click on a call to action button, it’s important to make it look as enticing as possible.

An animated call to action button that looks like it’s floating in mid-air is a fantastic way to get people to click. And the great thing is, it’s not as hard to implement on your site as you might think!

Here’s how to add a Squarespace floating button to your website using a snippet of CSS code in three steps.

Step 1: Add the CSS code

Go to the page you want to add your Squarespace sticky button to. Click the cog (Settings), then choose Advanced and Code Injection. Paste the code below into the box.

<div id="customFloatingButton">
    <a href="YOUR-LINK-HERE" target="_blank">Book now</a>
</div>

<style>
    #customFloatingButton {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000;
    }
    #customFloatingButton a {
        display: inline-block;
        background-color: #000;
        color: white;
        padding: 15px 30px;
        text-decoration: none;
        box-shadow: 0px 5px 10px -5px rgba(0,0,0,0.5);
        transition: 200ms;
    }
    #customFloatingButton a:hover {
        transform: scale(1.04);
    }
</style>

Step 2: Add the URL

Replace “YOUR-LINK-HERE” with the page you want your call to action button to link to, and “Book Now” with the text you want the button to have.

Step 3: Style the button

Alter the code to suit the style of your site. For example, you can change the background color from #000 to the color of your choice.

Close the code injection box and check your call to action button to make sure it looks right. And you’re done!

Bonus! Use Spark Plugin to animate your buttons

Spark Plugin has over 100 customization options, making it easy to style your website exactly how you want.

If you want to give your call to action buttons extra pizazz, the attention seeking buttons are a fantastic choice. Choose from four unique animations that will transform any button on your website.

Whether you opt for the subtle floating button or the vibrant shaking button, you’ll find the perfect call to action button to engage potential customers!

Don’t settle for boring call to action buttons on your website – use this Squarespace floating button hack to create buttons your web visitors want to click on.