How to disable a link using only CSS?

Question

Is there any way to disable a link using CSS?

I have a class called current-page and want links with this class to be disabled so that no action occurs

Answer 1

It's possible to do it in CSS

.disabled{
  cursor:default;
  pointer-events:none;
  text-decoration:none;
  color:black;
}

<a href="https://www.google.com" target="_blank" class="disabled">Google</a>

See at:

Please note that the text-decoration: none; and color: black; is not needed but it makes the link look more like plain text.

Answer 2

You can also size another element so that it covers the links (using the right z-index): That will "eat" the clicks.

(We discovered this by accident because we had an issue with suddenly inactive links due to "responsive" design causing a H2 to cover them when the browser window was mobile-sized.)

Answer 3

Apply below class on html.

.avoid-clicks {
  pointer-events: none;
}

Answer 4

pointer-events:none will disable the link:

.disabled {
       pointer-events:none;
}
<a href="#" class="disabled">link</a>

Answer 5

Bootstrap Disabled Link

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Bootstrap Disabled Button but it looks like link

<button type="button" class="btn btn-link">Link</button>

Answer 6

Try this:

<style>
.btn-disable {
    display:inline-block;
    pointer-events: none;       
}
</style>