Making a Divi Button Non-Clickable

|

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?

To make a button non-clickable, 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.

This post may contain referral links which may earn a commission for this site

Hundreds of new features for Divi
in one easy-to-use plugin

4 Comments

  1. 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
  2. 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

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