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!?

@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!!!

On 6/8/2023 at 9:33 AM, tuanphan said:

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;
}

 

Could this be edited in order to have two floating buttons?

On 10/9/2024 at 9:59 PM, HeatherM1234 said:

Could this be edited in order to have two floating buttons?

Yes. You can add 2 buttons to Footer and we can target ID. You can add then share site url, I will give you code. 

Ok I've added the second button, the url is www.studio48surrey.com

Thank you!

On 10/14/2024 at 4:11 AM, HeatherM1234 said:

Ok I've added the second button, the url is www.studio48surrey.com

 

Thank you!

You can use this to Website Tools > Custom CSS

#block-yui_3_17_2_1_1728047507496_17724, #block-yui_3_17_2_1_1728853644148_7931 {
    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;
}
/* Call Now */
#block-yui_3_17_2_1_1728853644148_7931 {
    bottom: 7vw;
}

Result

Fantastic thank you! Im finding the buttons are stacked overlapping each other on mobile view though? Is there a way to separate them?

3 hours ago, HeatherM1234 said:

Fantastic thank you! Im finding the buttons are stacked overlapping each other on mobile view though? Is there a way to separate them?

Add this extra CSS

@media screen and (max-width:767px) {
    #block-yui_3_17_2_1_1728853644148_7931 {
        bottom: 20vw !important;
    }
}

Hi Tuanphan, the overlay floating button code you shared above, we cannot make it work on our website: https://www.innovation-practice.com/ The button that we try to make floating is the Let's Connect button at the very bottom. Thank you!

Splendid!! Thank you so much!

Site URL: https://www.innovation-practice.com/

The overlay floating button code shared here, we cannot make it work on our website: https://www.innovation-practice.com/ The button that we try to make floating is the Let's Connect button at the very bottom. 

On 10/25/2024 at 4:15 AM, andrayxz said:

Site URL: https://www.innovation-practice.com/

The overlay floating button code shared here, we cannot make it work on our website: https://www.innovation-practice.com/ The button that we try to make floating is the Let's Connect button at the very bottom. 

With your site, you can use this CSS code

div#block-yui_3_17_2_1_1729686537714_2547 {
    position: fixed;
    bottom: 3vw;
    right: 0;
    height: 50px;
    display: block !important;
    z-index: 99999;
}
div#block-yui_3_17_2_1_1729686537714_2547 div {
    text-align: right;
}

I wrote a new guide here, so you can add 1 or 2 floating bottom in bottom right or bottom left, and make buttons appear on mobile or desktop only.