How to deactivate links using CSS?

You can deactivate links using the “pointer-events” CSS property. In this post, I will show you how to can disable a link on anchor tag (<a>), button, input, and CMS-based specific pages.

How to disable a link?

There are a couple of situations where you need this. Let’s explore them one by one.

Disable link on HTML anchor tag

<a href="google.com">Anchor text</a>

a {
  pointer-events: none;
}

This is how you can disable the click event for an anchor tag where you have the “HREF” attribute.

Disable button link

<button type="button" onclick="location.href='https://google.com';">Learn more</button>

button {
  pointer-events: none;
}

Deactivate links on input/submit

<form action="/">
  <input type="text">
  <input type="email" name="" id="name">
  <input type="submit" value="submit">
</form>

input[type="submit"] {
  pointer-events: none;
}

Disable links on specific WordPress pages

For example, you have a link that appears on every page of your WordPress website. If you want to disable the link on a specific page, target the link based on the page slug and write the same CSS.

On every page, you’ll find a unique page ID and class name. For more information about adding a page slug to the body class, see this post.

Let’s say you want to disable the link on the “About” page. Inspect the page and find the unique ID or class name. Assuming, the page has a class of “about.” So your CSS will be like this:

body.about a {
  pointer-events: none;
}

This is how you can disable links on a specific page. It’s just not limited to WordPress but you can do it with other CMSs and even static sites.

Aside from CSS, there are other ways to disable links. Let’s see a couple of them.

Disable links using pure JavaScript

let link = document.querySelector("a")
link.onclick = function(e) {
  e.preventDefault()
}
link.style.cursor = "none";

Disable links using jQuery

$( document ).ready(function() {
  $("a").click(function(e) {
    e.preventDefault()
    return false
  })
  $("a").css("cursor", "none");
})

If you’re using Bootstrap, you can simply add a “disabled” class to the link that you want to deactivate.

Conclusion

These are the most possible use cases and scenarios you may ever need to deactivate links. But if you have a totally different situation that was not mentioned in this post, please let me know.