isawize Posted May 13, 2020 Share Posted May 13, 2020 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 Link to comment
humxahafeex Posted May 13, 2020 Share Posted May 13, 2020 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
tuanphan Posted May 13, 2020 Share Posted May 13, 2020 Like this? or can you describe in detail/share link to an example? 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
isawize Posted May 13, 2020 Author Share Posted May 13, 2020 50 minutes ago, tuanphan said: Like this? or can you describe in detail/share link to an example? exactly ! I just need 1 icon tittled "book an appointment" (prendre rendez-vous in french) Link to comment
tuanphan Posted May 14, 2020 Share Posted May 14, 2020 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> GPGDesigns 1 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
isawize Posted May 17, 2020 Author Share Posted May 17, 2020 On 5/14/2020 at 3:08 PM, tuanphan said: https://beaverhero.com ok thank you tuanphan ! just for my information, what does this stand for ? Link to comment
tuanphan Posted May 17, 2020 Share Posted May 17, 2020 5 hours ago, isawize said: ok thank you tuanphan ! just for my information, what does this stand for ? it is button link, you replace with your site url ✌️ 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
lula344 Posted July 26, 2021 Share Posted July 26, 2021 (edited) Is it possible to set this up on just one page rather than the whole website? Edited July 26, 2021 by lula344 Link to comment
tuanphan Posted July 27, 2021 Share Posted July 27, 2021 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
Coggleton1 Posted August 14, 2021 Share Posted August 14, 2021 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
Coggleton1 Posted August 14, 2021 Share Posted August 14, 2021 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
tuanphan Posted August 14, 2021 Share Posted August 14, 2021 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?? Meg28607 and Dave909 1 1 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
Meg28607 Posted October 7, 2021 Share Posted October 7, 2021 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!! Link to comment
tuanphan Posted October 7, 2021 Share Posted October 7, 2021 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!! 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
LightLetterAus Posted November 26, 2021 Share Posted November 26, 2021 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
tuanphan Posted November 28, 2021 Share Posted November 28, 2021 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
LightLetterAus Posted November 29, 2021 Share Posted November 29, 2021 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 - Link to comment
tuanphan Posted November 30, 2021 Share Posted November 30, 2021 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 - #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; } 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
LightLetterAus Posted December 3, 2021 Share Posted December 3, 2021 Thank you so much, I will try it now! Link to comment
tuanphan Posted December 7, 2021 Share Posted December 7, 2021 On 12/3/2021 at 5:08 PM, LightLetterAus said: Thank you so much, I will try it now! Do you still need help? Dave909 1 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
LightLetterAus Posted December 7, 2021 Share Posted December 7, 2021 @tuanphan no I've added that code, and also some extra to make the call us an icon too. It seems to be working so thank you so much! I really appreciate your help 🙂 tuanphan 1 Link to comment
Dave909 Posted January 8, 2022 Share Posted January 8, 2022 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 Link to comment
tuanphan Posted January 10, 2022 Share Posted January 10, 2022 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> Dave909 1 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
Dave909 Posted January 15, 2022 Share Posted January 15, 2022 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
tuanphan Posted January 17, 2022 Share Posted January 17, 2022 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 Dave909 1 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment