Tech solutions that help your online business grow.

Are you frustrated because your beautiful Elementor buttons need a double tap to work on iOS devices like iPhones and iPads? You’re not alone. Many WordPress website owners and designers are baffled by why their buttons—built with care in Elementor—refuse to play nice with Apple’s touchscreens. If you’re searching for a definitive answer (and a code fix!), keep reading. Your double-tap troubles end here.

Why Do Elementor Buttons Need a Double Tap on iOS?

Let’s set the scene: You visit your WordPress site on your iPhone, tap a call-to-action button you created with Elementor, and…it just changes color. Only when you tap again does it actually navigate.

Infuriating? Absolutely.

This is Not (Entirely) Elementor’s Fault

This sticky situation comes from the way iOS browsers handle “hover” states. Unlike desktops, where a mouse hovers and clicks, touchscreens have no true hover. So, when iOS Safari or Chrome sees a fancy hover effect on a link or button, it decides to show you the “hovered” style first—on the first tap—thinking you might want to preview the state. It only follows the link on the second tap.

If you’re using Elementor, your buttons are styled with hover effects right out of the box. That’s great for desktop, but on iOS? Welcome to the world of double-tap navigation.

How Many Visitors Are Affected?

With mobile traffic now surpassing desktop in many industries, and Apple holding around 28%+ of mobile market share worldwide (and up to 55%+ in the US!), this problem is big. If you haven’t checked your analytics lately, now’s the time—you may be losing conversions with every extra tap.

Diagnosing the “Double Tap on iOS” Button Problem

Here are some common symptoms:

• On iPhone/iPad, Elementor buttons require two taps to work
• The first tap only applies the hover style
• Only the second tap actually clicks the link and navigates

If this describes your site, read on.

The Code Solution: One Tap to Rule Them All

What you really need is a way to tell iOS: “Hey, just go to the link when I tap this button!”

Good news: With a tiny snippet of JavaScript, you can globally fix every Elementor button—without manually editing each one.

The Universal JavaScript Fix for Elementor Buttons

Working with our friends at UICORE, we coded a fix – well, at least a workaround until Elementor or Apple address the issue. Add this JavaScript code to your site (instructions below):

// iOS double-tap fix for Elementor buttons
if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
  document.querySelectorAll('a.elementor-button, a.elementor-button-link').forEach(function (btn) {
    btn.addEventListener('touchend', function(evt) {
      // Prevent potential double navigation
      if(!btn.classList.contains('ios-tap-fixed')){
        btn.classList.add('ios-tap-fixed');
        var link = btn.getAttribute('href');
        if (link) {
          window.location = link;
        }
      }
    });
  });
}

// iOS double-tap fix for Elementor buttons
if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
  document.querySelectorAll('a.elementor-button, a.elementor-button-link').forEach(function (btn) {
    btn.addEventListener('touchend', function(evt) {
      // Prevent potential double navigation
      if(!btn.classList.contains('ios-tap-fixed')){
        btn.classList.add('ios-tap-fixed');
        var link = btn.getAttribute('href');
        if (link) {
          window.location = link;
        }
      }
    });
  });
}

How does this work?

• It targets all Elementor buttons on your site (.elementor-button and .elementor-button-link).
• On iPhones and iPads, when a button is tapped, the script instantly takes users to the linked page—no second tap required.
• No need to add extra classes to your Elementor buttons!
• This fix is polite: it only runs on iOS devices, leaving desktop and Android users blissfully unaffected.

Where Should I Place This Code?

There are several simple ways:

• Elementor Custom Code: Navigate to Elementor > Custom Code and add a new code snippet in the footer (Pro Only).
• Theme Customizer: Some themes support custom JavaScript in the Customizer (Appearance > Customize > Additional CSS/JS).
• Child Theme: Add it to your footer.php (before the closing </body> tag).
• Plugin: Use a WordPress plugin to add custom JS.

Always test on both mobile and desktop after deploying.

Problem Solved—No More Double-Tap Drama

By applying this fix, your Elementor buttons will work with a single, satisfying tap on all Apple iOS devices. No more lost conversions, annoyed users, or bewildered designers.

To sum up:

• The iOS double-tap button issue affects nearly a third of global smartphone traffic.
• It’s caused by how iOS emulates the CSS hover state with touch.
• The simple JavaScript fix above works for all Elementor buttons—globally.

Give your users what they really want: beautiful buttons that work the first time, every time.