How to Add a Click-to-Call Button on a Mobile Website (HTML and CSS)

Adding a click to call button to your website is one of the quickest wins you can implement to boost mobile conversions. With more than 70% of web traffic now coming from smartphones, letting users dial your business with a single tap removes friction and turns visitors into leads instantly.

In this guide, you will get the exact HTML markup, CSS styling, placement tips, and a Google Tag Manager setup to track every call click. No plugins, no third-party widgets, just clean code you can copy and paste.

What is a Click to Call Button?

A click to call button is a clickable element on a website that automatically dials a phone number when a visitor taps it on a mobile device. It uses the tel: URI scheme, which is supported by all modern browsers and mobile operating systems.

When tapped on a smartphone, it opens the native dialer with your number pre-filled. On desktop, it can trigger apps like FaceTime, Skype, or the default VoIP client.

The Basic HTML Markup

At its simplest, a click to call link looks like this:

<a href="tel:+18005551234">Call Us Now</a>

A few rules to follow when writing the phone number:

• Always include the country code with a plus sign (e.g. +1 for US, +33 for France)
• Do not include spaces, dashes, or parentheses inside the href
• You can display a formatted number to the user, but keep the href clean

Here is a cleaner example with a formatted display:

<a href="tel:+18005551234" class="call-btn">
  <span class="call-icon">☎</span>
  <span class="call-text">(800) 555-1234</span>
</a>

Styling the Button with CSS

A plain text link will not catch the eye. Here is a full CSS snippet for a modern, mobile-friendly floating click to call button:

.call-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #25D366;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  padding: 14px 22px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 9999;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.call-btn:hover {
  background-color: #1ebe5d;
  transform: scale(1.05);
}

.call-icon {
  font-size: 20px;
}

@media (min-width: 1024px) {
  .call-btn {
    bottom: 30px;
    right: 30px;
  }
}

This creates a floating button that stays visible while users scroll. The green color signals action, the rounded shape feels native to mobile, and the shadow gives it depth.

Show the Button Only on Mobile

Since calling from a desktop is rarely useful, many sites display the button only on smartphones. Add this rule:

@media (min-width: 768px) {
  .call-btn {
    display: none;
  }
}

Best Placement Practices

Where you place the button matters as much as how it looks. Here are the four most effective spots:

Some quick rules to follow:

• Make sure the tap target is at least 44×44 pixels (Apple HIG recommendation)
• Use high contrast colors so the button stands out from your page background
• Never hide it behind a menu on mobile
• Pair the button with a clear label like “Call Now” or “Talk to an Expert”

Tracking Clicks with Google Tag Manager

If you cannot measure it, you cannot improve it. Here is how to track every click on your call button using GTM and send the event to Google Analytics 4.

Step 1: Enable the Click Variables in GTM

1. In Google Tag Manager, go to Variables
2. Click Configure under Built-In Variables
3. Enable Click URL, Click Element, Click Classes, and Click ID

Step 2: Create a Trigger

1. Go to Triggers and click New
2. Choose trigger type Click – Just Links
3. Set it to fire on Some Link Clicks
4. Condition: Click URL contains tel:
5. Name it “Click – Phone Call” and save

Step 3: Create the GA4 Event Tag

1. Go to Tags, click New
2. Choose Google Analytics: GA4 Event
3. Set Event Name to phone_call_click
4. Add an event parameter: phone_number with value {{Click URL}}
5. Attach the trigger you just created
6. Save, preview, then publish

Once published, every tap on your click to call button will show up in GA4 under Reports > Engagement > Events. You can then mark it as a key event for conversion tracking.

Bonus: Add an Icon with SVG

For a more polished look, replace the unicode phone character with an inline SVG icon:

<a href="tel:+18005551234" class="call-btn">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="white">
    <path d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.36 11.36 0 003.58.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.58 1 1 0 01-.24 1.01l-2.21 2.2z"/>
  </svg>
  Call Now
</a>

Common Mistakes to Avoid

• Forgetting the country code: without it, international visitors cannot complete the call
• Using JavaScript when HTML is enough: the tel: protocol works natively, no scripts needed
• Tiny tap targets: if your button is smaller than 44px, users will mis-tap
• No tracking: if you do not measure clicks, you cannot prove ROI
• Showing it during off-hours: consider hiding the button when your phone lines are closed using a small JavaScript snippet

FAQ

Does the tel: link work on desktop browsers?

Yes, but the behavior depends on the user’s setup. On Windows it may prompt to open Skype or another VoIP app. On macOS it can launch FaceTime. That is why many sites only show the button on mobile.

Can I use a click to call button with WhatsApp instead?

Yes, replace the href with https://wa.me/18005551234. This opens WhatsApp directly with your number ready to chat or call.

Do I need a plugin to add a call button on WordPress?

No. You can paste the HTML and CSS directly into a Custom HTML block, a theme template file, or the Additional CSS area in the Customizer. Plugins are only useful if you want extra features like scheduling or A/B testing.

How do I format international phone numbers in the tel: link?

Always use the E.164 format: a plus sign followed by the country code and the full number, with no spaces or symbols. Example: tel:+442071234567 for a London number.

Will a click to call button improve my SEO?

Indirectly, yes. It improves mobile usability and engagement, two factors Google considers in its page experience signals. It also reduces bounce rates by giving users a clear next step.

Final Thoughts

A click to call button on your website is a five-minute change that can deliver real conversion gains, especially for local and service-based businesses. With the HTML, CSS, and GTM tracking provided here, you have everything needed to ship it today and start measuring the results tomorrow.

Keep it simple, keep it visible, and keep it measurable. Your mobile visitors will thank you with a phone call.