Making a Divi Button Non-Clickable

Written by Dan Mossop

The Divi Theme's button module gives you an easy way to add a styled, linked button to your page. But what if you want the button to be unlinked / non-clickable?

Make the Divi Button Unclickable on All Devices

To make a button non-clickable on all devices (i.e. desktop, tablet and mobile), you can enter:

pointer-events: none;
into the button module's "Button Settings > Advanced > Custom CSS > Main Element" box, like so:
Note that this will also disable the hover effect on the button.

Make the Divi Button Clickable on Mobile Only

To make a Divi button unclickable on desktop / tablet widths, but leave it clickable on mobile widths:

First, follow the instructions above to make the Divi button unclickable on all devices.

Then add the following:

pointer-events: auto;

into the button module's mobile option of the "Button Settings > Advanced > Custom CSS > Main Element" box, like so:

That will override the main setting for the option, allowing the button to work on mobiles.

Transform Your Divi Buttons with Ease

Enhance the functionality of your Divi buttons by customizing their clickability and styling effortlessly. With WP Magic CTAs, you can further elevate your WordPress site by generating sophisticated call-to-actions that are highly targeted and engaging.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

8 Comments

  1. So einfach – so gut!
    Besten dank für eure hilfreichen Tipps.

    Reply
    • Gern geschehen!

      Reply
  2. Hi there, I was using your code and it worked. I was wondering how can I make the button still clickable only on mobile devices? When i enter the code in the main element box and I switch to mobile, the code is still there. I only want to do that for one certain button that should be clickable on mobile but unclickable on desktop.

    Thanks for your help!

    Reply
    • Hey Caro, I'm guessing the code you're seeing when you switch to mobile is greyed out? What's happening in this case is that Divi uses the main / desktop setting as the default for mobiles, which applies if the mobile box is empty. The solution is to put something in to the mobile box to prevent the default from being applied. Perhaps the most sensible thing to put in there is "pointer-events: auto;" which will cancel out the "pointer-events: none;" set on desktop. I've updated the post above with a section on this. I hope it does what you need (but let me know if not). Thanks!

      Reply
  3. I have an opposite problem. The text in the send-button in a Divi contact form is not clickable at all. Anybody experienced this problem before or know how to solve it?

    Reply
    • Hey Kim, I haven't experienced it myself – it doesn't seem to be happening on either my own contact forms or my test sites. Are you able to share a link to the affected contact form?

      Reply
  4. Hi,

    I did it on a text element and now I can't select it even in the divi's development page, which is higly annoying as I can't modify it or delete it anymore…
    Could you please let me know how to deal with this situation?
    Thanks

    Reply
    • Hey Gilles, if you go into wireframe view you'll be able to access the module settings and delete the CSS, or the whole module. This post explains what wireframe view is / how to access it:

      https://www.elegantthemes.com/blog/theme-releases/divi-wireframe-mode

      I hope that helps, but let me know if you need a solution that lets you apply the CSS to a text element – it should be possible to create some CSS which applies only on the frontend, not in the visual builder.

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.

Latest From Divi Booster

Fix Divi Text Module "Regular" Font Weight Not Working

Are you encountering an issue where the font weights in Divi's Text Module don't seem to apply as expected? In particular, you might find that when you set the text module's body text font weight to "Regular", your font is actually assigned a weight of 500 instead of...

Make the Divi Gallery Module Swipeable

The Divi Gallery Module comes with a slider mode that lets you display images in a slider with clickable left/right arrows to scroll through the images. For mobile / touchscreen users, you can improve the user experience by allowing your user to swipe to navigate to...

How to Use Divi Dynamic Content in Woo Modules Product Selector

Divi's Dynamic Content is a powerful feature that lets you populate your Divi modules and theme builder templates with data pulled in various sources, such as custom fields. This allows for efficient organization and maintenance of your sites.Unfortunately, Divi's...

Removing Gaps in Divi Builder Layouts

Designing a seamless, professional-looking website is often about managing space effectively. Gaps in Divi Builder - particularly excessive white space between sections, rows, or modules - can disrupt your layout, leading to a fragmented and less engaging user...

Random Divi Posts