Designer Pirabu portfolio menu
Pirabu designer share

How to Add a High-Converting Fixed Call-to-Action (CTA) Button to Your Website

Adding a call to action button is important because it allows your website visitors to take action. By adding a call to action button, you can increase your website’s conversion rate and lead to more sales.

Looking to boost conversions on your website? Adding a fixed call-to-action (CTA) button that prompts visitors to take action, such as dialing your business directly, is a proven strategy. In this step-by-step guide, we’ll show you how to create a CTA button that stays fixed at the bottom of your page and converts more leads.

What You’ll Learn:

How to position the button for maximum visibility

How to add a click-to-call button using HTML

How to style the button using CSS

Action: When someone clicks the button it will dial a phone call

Step 1 :

To create a click-to-call button, we’ll use an <a> tag with a class name for styling. The button text will say “Call me now,” and when clicked, it will initiate a phone call to the number you specify.

Here’s the HTML code:

<a class="btn-cp" href="tel:+33760774934">Call me now</a>

Key Tips:

Replace +33760774934 with your own phone number in the href attribute.
The a.btn-cp class will be styled later using CSS, but you can also customize the class name if needed. Just make sure to use the same class name in the CSS part.

Step 2 :

Now, let’s style the button so it stands out. The following CSS will make the button black (#000) with white (#fff) text. On hover, it will change to yellow (#ffd448) with black text.

a.btn-cp{
 background:#000;
 text-decoration:none;
 color:#fff;
 padding: 0.5rem 1rem;
 border-radius:50px;
 position:fixed;
 bottom:1rem;
 right:1rem;
}

a.btn-cp:hover{
 background:#ffd448;
 color:#000;
}

Step 3: Positioning the CTA Button for Maximum Visibility

This button is designed to stay fixed at the bottom-right corner of your website, making it visible to users at all times. If you’d like to adjust the position, modify the bottom: 1rem; and right: 1rem; values in the CSS.

Benefits of a Fixed CTA Button

  • Improves User Experience: A fixed CTA ensures your visitors always have easy access to your offer, regardless of where they are on the page.
  • Boosts Conversions: By adding a click-to-call button, you make it easier for potential customers to contact you, increasing the likelihood of conversion.

Final Thoughts

Implementing a fixed call-to-action button is a simple yet effective way to engage your visitors and convert more leads. Whether you’re looking to increase phone inquiries or offer immediate support, this strategy is an essential addition to your website.