Floating Button Bottom Right Corner

Hi,

Could someone please provide me with some code to create a floating button (not 100% sure if a floating button is what I'm after, I've attached a screenshot of something I am needing) in the bottom right-hand corner as a 'make a booking' call-to-action?

I've tried to follow a dozen tutorials however I just can't quite get it right. Originally I created the button just in a random section and used some code in the css section of the design page, however using z-index just made it cover the entire screen and wasn't positioned in the bottom right-hand corner. Followed a diff tutorial that had me make in the footer and use code injection, this still hasn't worked. Any assistance would be gladly appreciated before I pull all of my hair out 🙂 Ideally I'd love for it to be on most pages but not every page, however, more than ok if it needs to be on every page, so long as as you're scrolling down any of the given pages it is present in the bottom right-hand corne.

url is https://www.sattvaspa.com.au/

Thanks so much x

You can add a Button Block in Site Footer, then we can give code to make it float on bottom right corner.

Thank you so much. I've added the 'make a booking' button in the footer now 🙂

On 6/5/2023 at 5:22 PM, Rubykatedesign23 said:

Thank you so much. I've added the 'make a booking' button in the footer now 🙂

Add to Design > Custom CSS

footer.sections .button-block {
    position: fixed;
    bottom: 3vw;
    right: 3vw;
   width: 200px;
    height: 50px;
    display: block !important;
    z-index: 99999;
}
footer.sections section, footer.sections {
    z-index: 99999 !important;
}

@tuanphan I was just wondering if it's possible to have a floating button not on the overlay menu for mobile? I'd love it not to be on the homepage on desktop either, but that's not a big deal. Unfortunately the client isn't so keen on there being a 'make a booking' button onto of the 'book now' button. I've tried all different menu alignments, but no deal for client. I had been originally trying to get some code that can be injected onto 3 specific pages, however the code didn't work/the floating button was turned on the side and not in the bottom righthand corner. Unless this is doable? Thank you SO much in advance for any insight/assistance.

Screenshots - the page titled ''treatment's' shows how useful it is having that button for this page, as it's too much text for a customer to scroll alllll the way down to the bottom or to have to scroll up for the 'book now' button to show in the header (this also doesn't even work on mobile etc) 

Second screenshot just shows the overlapping 'booking' buttons which is just too much unfortunately.

Last screenshot shows a spa website called 'comma' which is where the inspo for the floating booking button came from. I'm guessing this website hasn't been created in Squarespace as the 'book now' button down the very bottom is much better, and their overlay menu is farrrrr better than Squarespace's shit limitations for mobile ughhhhh. I already know the answer is going to be no, but just incase -  a 'BOOK NOW' block button like this isnt possible is it?

You mean hide Book Now button on Burger Overlay Menu? 

and make Book Now float on bottom of site on mobile, same as commaspace site?

@tuanphan yes! Thank you for articulating what I was trying to say haha yes, just wanting the button hidden on the burger overlay on mobile!?

Add to Design > Custom CSS

body.header--menu-open a.btn {
    visibility: hidden;
}
@media screen and (max-width:767px) {
  div#block-yui_3_17_2_1_1685518172534_2669 a {
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    padding: 10px 20px !important;
    height: auto !important;
    display: flex !important;
    border-radius: 0 !important;
}  
}

@tuanphan It's just perfect, thank you so very much! You're absolutely brilliant at what you do and you've helped me so much - the client is in love with it, so thank you again!!!