Jump to content

floating button / navigation

Recommended Posts

34 minutes ago, isawize said:

hi everyone,

I'm looking for a way to create a floating button (linked to an url) on the right side of a page, the button remaining from to bottom while scrolling...
thanks  adance for your help

 

 

Hi , It's quite easy , Wil you please share your website Link so We can provide you with the code 🙂

Link to comment
22 hours ago, isawize said:

exactly ! I just need 1 icon tittled "book an appointment" (prendre rendez-vous in french)

Add this to Home > Settings > Advanced > Code Injection > Footer

<a href="https://beaverhero.com" class="t-button">Button Text</a>

and add this to Code Injection > Header

<style>
  .t-button {
  	display: inline-block;
    background: green;
    color: white;
    padding: 1em 2em;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: fixed;
    top: 50%;
    right: 0;
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
18 hours ago, lula344 said:

Is it possible to set this up on just one page rather than the whole website?

Edit that page >> Add a Code Block (at bottom of page) >> Paste this code

<a href="https://beaverhero.com" class="t-button">Button Text</a>
<style>
  .t-button {
  	display: inline-block;
    background: green;
    color: white;
    padding: 1em 2em;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: fixed;
    top: 50%;
    right: 0;
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
On 7/27/2021 at 11:01 AM, tuanphan said:

Edit that page >> Add a Code Block (at bottom of page) >> Paste this code

<a href="https://beaverhero.com" class="t-button">Button Text</a>
<style>
  .t-button {
  	display: inline-block;
    background: green;
    color: white;
    padding: 1em 2em;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: fixed;
    top: 50%;
    right: 0;
  }
</style>

 

Hey @tuanphan, the above code is great and just what I'm looking for to appear on certain pages of a website I'm building. But I need two separate buttons one on top of the other on the page. Is there a way to adapt the code to create two buttons?

Link to comment
2 minutes ago, Coggleton1 said:

Hey @tuanphan, the above code is great and just what I'm looking for to appear on certain pages of a website I'm building. But I need two separate buttons one on top of the other on the page. Is there a way to adapt the code to create two buttons?

@tuanphan and is there a way to make the link clicked open in a new window? All help greatly appreciated!

Link to comment
8 hours ago, Coggleton1 said:

@tuanphan and is there a way to make the link clicked open in a new window? All help greatly appreciated!

To make link open new window, edit this code

Quote
<a href="https://beaverhero.com" class="t-button">Button Text</a>

to this

Quote
<a href="https://beaverhero.com" class="t-button" target="_blank">Button Text</a>

to hide button on one page, add this to Page Header

<style>
  a.t-button {display: none !important;}
</style>

But I need two separate buttons one on top of the other on the page. Is there a way to adapt the code to create two buttons?

One on top, second on bottom??

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
On 8/14/2021 at 8:05 AM, Coggleton1 said:

Hey @tuanphan, the above code is great and just what I'm looking for to appear on certain pages of a website I'm building. But I need two separate buttons one on top of the other on the page. Is there a way to adapt the code to create two buttons?

thank you @tuanphan!! this was a lifesaver.  I have the single button looking good, How can I layer multiple buttons?  I want to list 6 dates and times to link to for ticket purchases.  thanks!!

Screen Shot 2021-10-07 at 9.36.26 AM.png

Link to comment
7 hours ago, Meg28607 said:

thank you @tuanphan!! this was a lifesaver.  I have the single button looking good, How can I layer multiple buttons?  I want to list 6 dates and times to link to for ticket purchases.  thanks!!

Screen Shot 2021-10-07 at 9.36.26 AM.png

You mean 7 buttons or 3 buttons

I just sent to your email

3 buttons, use this code

<a href="https://beaverhero.com" class="t-button">Button Text</a>
<a href="https://beaverhero.com" class="t-button button2">Button Text 2 </a>
<a href="https://beaverhero.com" class="t-button button3">Button Text 3</a>
<style>
  .t-button {
  	display: inline-block;
    background: green;
    color: white;
    padding: 1em 2em;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: fixed;
    top: 50%;
    right: 0;
z-index: 9999;
  }
/* button 2 */
.button2 {
    top: calc(~"50% - 70px");
}
/* button 3 */
.button3 {
    top: calc(~"50% - 140px");
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

Hi @tuanphan it's so nice of you to provide this code for people, very helpful. I want to use it to display a Call button and a Whatsapp button, the Whatsapp button is working, however I can't get the click to call to work. I'm using this code for it, what am I doing wrong?

<a href=“tel:+61285988504” class="t-button">Call Us</a>

Also and I hope this isn't asking too much, is there a way to use an icon instead of text, as on the mobile the buttons take up a lot of real estate.

Thank you so much in advance!

Link to comment
On 11/26/2021 at 4:47 PM, LightLetterAus said:

Hi @tuanphan it's so nice of you to provide this code for people, very helpful. I want to use it to display a Call button and a Whatsapp button, the Whatsapp button is working, however I can't get the click to call to work. I'm using this code for it, what am I doing wrong?

<a href=“tel:+61285988504” class="t-button">Call Us</a>

Also and I hope this isn't asking too much, is there a way to use an icon instead of text, as on the mobile the buttons take up a lot of real estate.

Thank you so much in advance!

Not sure whey, but your " " symbol is invalid. Copy this new code 

<a href="tel:+61285988504" class="t-button">Call Us</a>

With icon, if you share link to your site, we can test & give the icon code easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
21 hours ago, LightLetterAus said:

Hi @tuanphan, thanks for that. I've updated the code with yours but I still can't see the call us button, strange.

Our site is https://lightletter.com.au/ .

I have hosted a whatsapp icon on squarespace, as I thought I'd have to add the image link somewhere. It's -

whatsapp-icon3-150px.png

#1. Add this to Design > Custom CSS

/* call us overlap whatsapp */
a.t-button.button2 {
    top: calc(~"50% - 70px") !important;
}

#2. To change whatsapp text to icon, add this CSS

/* whatsapp */
a.t-button.button2 {
    background-image: url(https://static1.squarespace.com/static/5e92bd3b9d0f316bec63924e/t/61a0b21beff3f125623552e8/1637921307092/whatsapp-icon3-150px.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    color: transparent;
    background-position: right;
    background-color: transparent !important;
}

image.thumb.png.dbbade12722a9c7ebc53254ceab76d2b.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
On 1/8/2022 at 8:07 PM, Dave909 said:

Hello @tuanphan

I also tried your code, many thanks for that. 2 questions about it:

1) could this floating button(s) also only appear on specific pages?

2) if now, is it possible to deactivate it on mobile devices?

Many thanks for your help and Greetings, Dave

#1. If you use this code, it will appear on page where you added the code

#2. If you use #1 code, use this full code

<a href="https://beaverhero.com" class="t-button">Button Text</a>
<style>
  .t-button {
  	display: inline-block;
    background: green;
    color: white;
    padding: 1em 2em;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: fixed;
    top: 50%;
    right: 0;
  }
  @media screen and (max-width:767px) {
    .t-button {display: none !important;}
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 1/10/2022 at 4:18 AM, tuanphan said:

#1. If you use this code, it will appear on page where you added the code

#2. If you use #1 code, use this full code

<a href="https://beaverhero.com" class="t-button">Button Text</a>
<style>
  .t-button {
  	display: inline-block;
    background: green;
    color: white;
    padding: 1em 2em;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: fixed;
    top: 50%;
    right: 0;
  }
  @media screen and (max-width:767px) {
    .t-button {display: none !important;}
  }
</style>

 

Thanks, that works - what if iI want to use like 5 buttons underneath each other?

I saw your code up in this topic but on my side, there always only appeared 1 button...

Link to comment
On 1/15/2022 at 9:52 PM, Dave909 said:

Thanks, that works - what if iI want to use like 5 buttons underneath each other?

I saw your code up in this topic but on my side, there always only appeared 1 button...

With 5 buttons, try this code

<a href="https://beaverhero.com" class="t-button">Button Text 1</a>
<a href="https://beaverhero.com" class="t-button button2">Button Text 2</a>
<a href="https://beaverhero.com" class="t-button button3">Button Text 3</a>
<a href="https://beaverhero.com" class="t-button button4">Button Text 4</a>
<a href="https://beaverhero.com" class="t-button button5">Button Text 5</a>
<style>
  .t-button {
  	display: inline-block;
    background: green;
    color: white;
    padding: 1em 2em;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: fixed;
    top: 50%;
    right: 0;
  }
  .button2 {
  		top: calc(50% + 50px);
  }
  .button3 {
  		top: calc(50% + 100px);
  }
   .button4 {
  		top: calc(50% + 150px);
  }
   .button5 {
  		top: calc(50% + 200px);
  }
  @media screen and (max-width:767px) {
    .t-button {display: none !important;}
  }
</style>

If it doesn't work, please share link to your site

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.