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.
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
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.
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;
}
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.
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.