Fixed Call to Action Button

Hello,

I need to create a fixed call to action button that appears on all pages of the website on the bottom right (and hovers as you scroll up or down on webpages). I need customers to very easily find the contact section.

The button needs to take people to the Contact page. I've done a mockup of how I want this to look (on bottom right of both screenshots) but I do need the button to be narrower in width so it isn't too clunky.

Would really appreciate your help.

That worked! Thank you so much.

Hi again, I want to ensure the above button is noticeable – do you have some codes I can use to add some animation like a wiggle effect or a flashing effect?

use new code, if it doesn't work, please share site url, I can check easier

<a href="https://google.com" class="tp-button">Contact</a>
<style>
  a.tp-button {
  	background-color: #89b36a !important;
    color: white !important;
    padding: 20px 30px;
    border-radius: 50px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
     -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
  }
  @-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
</style>

It will make button down up down up down up down up down up...

Demo: https://codepen.io/jaabert/pen/gObMGBV

That's brilliant and it works well. Thank you. Is it possible to add in a hover colour like the other buttons on the website?

18 hours ago, Jefferson0123 said:

That's brilliant and it works well. Thank you. Is it possible to add in a hover colour like the other buttons on the website?

How hover? Can you share link to your site?

Here's the link to my website: https://olive-glockenspiel-gbhp.squarespace.com

I'd like the new Contact Us bottom (bottom right of webpage) to darken slightly when you hover over it. Like how the other CTA buttons are on the website.

On 12/15/2023 at 1:36 AM, Jefferson0123 said:

Here's the link to my website: https://olive-glockenspiel-gbhp.squarespace.com

I'd like the new Contact Us bottom (bottom right of webpage) to darken slightly when you hover over it. Like how the other CTA buttons are on the website.

Add this code under

<style>
  a.tp-button:hover {
    opacity: 0.8;
}
</style>