Floating CTA Button on all Linked pages

Please help. I want at CTA button to call our phone number. First I tried setting it up in the Home/Page Settings/Advanced. It worked on that page yesterday, but now the button has disappeared. I also tried entering the code in the Website Tools/Code Injection/Header. Neither is creating the Call button I want to float when scrolling.   Here's the code I used:

<div id="customFloatingButton">
    <a href="tel:5859242060" target="_blank">Call 585-924-2060</a>
</div>

<style>
    #customFloatingButton {
        position: fixed;
        botloatingButton a {
        display: inline-block;
        background-color: #8ACB88;
        color: white;
        padding: 10px 10px;
        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>

Please share the site’s URL with the community. By default, it isn't included in the public post.

2 hours ago, paul2009 said:

Please share the site’s URL with the community. By default, it isn't included in the public post.

https://guppy-flatworm-nret.squarespace.com/

Thanks for letting me know that, as I did put it in the post but not the comment. Can you help me?

@RuthRTW Can you share the Password of the website. 
Might be z-index would be the issue, you can add z-index: 9999; in your CSS code and test it. 

Quote

I added z-index: 9999 in a new line below the position: fixed;

Unfortunately I still have no button.

@RuthRTW can you share the password of the website?

@RuthRTW There is a syntax issue in your Code. 
Below is the updated version of the code. Replace old code with this new one.
<style>
    #customFloatingButton {
        position: fixed;
        bottom: 10px;
        right: 10px;
    }
    #customFloatingButton a {
        display: inline-block;
        background-color: #8ACB88;
        color: white;
        padding: 10px 10px;
        text-decoration: none;
        box-shadow: 0px 5px 10px -5px rgba(0,0,0,0.5);
        transition: all 200ms;
        z-index: 9999;
    }
    #customFloatingButton a:hover {
        transform: scale(1.04);
    }
</style>

@sqsp_guru Thanks for catching syntax error -- can you tell I am new to this? I've attached a screenshot of the updated code in the website header. When I first changed it I saw the button but then when I refreshed, it disappeared again! I tried again to add the corrected code to the header of the home page & still nothing.

Pswd:  NewSite#SS24

4 hours ago, RuthRTW said:

@sqsp_guru Thanks for catching syntax error -- can you tell I am new to this? I've attached a screenshot of the updated code in the website header. When I first changed it I saw the button but then when I refreshed, it disappeared again! I tried again to add the corrected code to the header of the home page & still nothing.

 

Pswd:  NewSite#SS24

Your password is not working. can you double check the password?

Sorry that was the incorrect password. The password is timewise2024

Thanks for any help you can provide!

@sqsp_guru  Thank you for your help -- floating button working well now.

I have a similar problem need this image to be fixed and floating on main page and this is the code I am using. unfortunately it becomes massive when I put in code. 

#block-yui_3_17_2_1_1714285676278_6321 {position: absoulute;
  position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999;
    height:"60px";
}

it is supposed to a lot smaller, a lot smaller. 

On 4/30/2024 at 9:34 PM, graciad said:

I have a similar problem need this image to be fixed and floating on main page and this is the code I am using. unfortunately it becomes massive when I put in code. 

#block-yui_3_17_2_1_1714285676278_6321 {position: absoulute;
  position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999;
    height:"60px";
}

it is supposed to a lot smaller, a lot smaller. 

Can you share site url? We can check problem easier