Adding a floating contact-button on the Brine?

Hello I'd like to add a floating button on the right side of my page. Is there a quick fix for this? Thank you all a lot.My website is lovemoves.de

@LoveMoves you mean? Can you post an example?

I am looking for something similar to this: https://www.tsiapparel.com/ If possible I would like to link it to a phone-number. I am a beginner with HTML and I am so thankful for every help!

That is so perfect! Thank you a lot!

Hello! I'm attempting this same floating button. I used your suggestion above and it looks great, but it doesn't let me click on it. Any advice much appreciated if you happen to see this. Thanks so much!

Hey this worked brilliantly. One thing I wish is that it appeared on the cover page of the site as well. Any suggestions?

@GooseGuy

Please post the URL for your cover page.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

13 hours ago, GooseGuy said:

Hey this worked brilliantly. One thing I wish is that it appeared on the cover page of the site as well. Any suggestions?

I'm not sure this will work on Cover Page

Try adding to Cover Page Settings > Advanced > Header

<div class="kl-float">
   <a href="https://www.tsiapparel.com/uniform-enquiry">
   <h9 style="color:white">REQUEST QUOTATION</h9>
   </a>
</div>
<style>
  .kl-float {
   position: fixed;
   opacity: .9;
   top: calc(30%);
   right: 0;
   z-index: 20000;
   background-color: #f9674d;
   white-space: nowrap;
   text-align: center !important;
   border-radius: 0px;
   height: 28px;
   font-family: montserrat;
   font-weight: bold;
   font-size: 12px;
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   transform-origin: bottom right;
}
</style>

Thanks for the quick response. Currently the site isnt live but here are screenshots of the home page using the code you suggested and the rest of the pages. 

Some reason the home page exit doesn't look the exact same as the other exit button. Let me know if you have any suggestions on making them look identical

Here is the code I used for the exit button on all but cover page 

CSS 

.kl-float {
   position: fixed;
   opacity: ;
   top: calc(30%);
   right: 0;
   z-index: 20000;
   background-color: #eb2529;
   white-space: nowrap;
   text-align: center !important;
   border-radius: 0px;
   height: 28px;
   font-family: Futura;
   font-weight:;
   font-size: 12px;
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   transform-origin: bottom right;
}

HTML in footer

<div class="loader">
  
</div>

<div class="kl-float">
   <a href="https://google.com">
   <h9 style="color:white">EXIT</h9>
   </a>
</div>

This is what I put inside the coding for cover page settings

<div class="kl-float">
   <a href="https://google.com/">
   <h9 style="color:white">EXIT</h9>
   </a>
</div>
<style>
  .kl-float {
   position: fixed;
   opacity: ;
   top: calc(30%);
   right: 0;
   z-index: 20000;
   background-color: #eb2529;
   white-space: nowrap;
   text-align: center !important;
   border-radius: 0px;
   height: 28px;
   font-family: Futura;
   font-weight: ;
   font-size: 12px;
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   transform-origin: bottom right;
}
</style>

21 minutes ago, GooseGuy said:

Currently the site isnt live

Your site doesn't have to be live for us to look at it if you put a site-wide password on it and give us the password.

Hello! What link should i send for you guys to access it. I just set up the password

Oh wait! I dont have a domain just yet 

From what you can see with the screenshots does anyone have a suggestion on how to change the look of the button on the cover page to look like the button on the rest of the pages 

I apologize I am very scatter brained today.

Here is the link 

redflagspgh.org

password

RedFlags2020

18 minutes ago, GooseGuy said:

I apologize I am very scatter brained today.

 

Here is the link 

redflagspgh.org

password

RedFlags2020

You mean button underline? Add this to Cover Page Header

<style>
  a {
    text-decoration: none;
}
</style>

Also, h9 doesn't exist, please rename h9 to h6

<h6 style="color:white">EXIT</h6>

Hey changing the H9 to H6 made the text get smaller and look even less like the button thats on the other pages?

changing the style to none worked. The only difference that I notice now is the placement of the word exit. It seems to be slightly off center on cover page and centered perfectly on the rest.

redflagspgh.org

RedFlags2020

As well as the red block is slightly moved away from right side of screen on cover page

but flipping back and forth between pages the most noticeable is the text 

Hi there. I'm attempting to do something similar to this but use icons buttons within the float bar instead of text -  for example social media icons or icons that relate to each page of website. Is there any way to do this? 

Thanks

Mehak

Thanks so much @tuanphan the code worked perfectly. 

I wondered if anyone know how I can link to a lightbox form from this floating button? Currently it looks like I can only link to a url.

My website is: https://www.containerville.co.uk/

Any help would be appreciated

hi @tuanphan ooh thanks. so this will still work with the floating button? do you have an example of this (floating button > form lightbox) so i can see before purchasing? 

On 2/15/2021 at 9:32 PM, handossary said:

hi @tuanphan ooh thanks. so this will still work with the floating button? do you have an example of this (floating button > form lightbox) so i can see before purchasing? 

Demo page. https://tuanphan.squarespace.com/button-lightbox?noredirect

Pass: abc

(Click Button to Lightbox in right of screen)

On 11/9/2020 at 2:54 PM, tuanphan said:

I'm not sure this will work on Cover Page

Try adding to Cover Page Settings > Advanced > Header

<div class="kl-float">
   <a href="https://www.tsiapparel.com/uniform-enquiry">
   <h9 style="color:white">REQUEST QUOTATION</h9>
   </a>
</div>
<style>
  .kl-float {
   position: fixed;
   opacity: .9;
   top: calc(30%);
   right: 0;
   z-index: 20000;
   background-color: #f9674d;
   white-space: nowrap;
   text-align: center !important;
   border-radius: 0px;
   height: 28px;
   font-family: montserrat;
   font-weight: bold;
   font-size: 12px;
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   transform-origin: bottom right;
}
</style>

 

This one has worked out for me, and I was able to modify it towards my needs, but I'm just after one more thing. Can we make it hide in some degree towards the right side when we start scrolling, and then pop back out when someone hovers over it with the cursor? Or is it asking too much? 😄

Thanks for your answers!