How to disable a link using only CSS

From this solution:

[aria-current="page"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

<a href="link.html" aria-current="page">Link</a>

For browser support, please see https://caniuse.com/#feat=pointer-events. If you need to support Internet Explorer, there is a workaround; see this answer.

Warning: The use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS 3 UI draft specification but, due to many open issues, has been postponed to CSS 4.

CSS can only be used to change the style of something. The best you could probably do with pure CSS is to hide the link altogether.

What you really need is some JavaScript code. Here's how you'd do what you want using the jQuery library.

$('a.current-page').click(function() { return false; });

CSS can't do that. CSS is for presentation only. Your options are:

• Don't include the href attribute in your <a> tags.
• Use JavaScript, to find the anchor elements with that class, and remove their href or onclick attributes accordingly. jQuery would help you with that (NickF showed how to do something similar but better).

You can set the href attribute to javascript:void(0):

.disabled {
  /* Disabled link style */
  color: black;
}

<a class="disabled" href="javascript:void(0)">LINK</a>

If you want it to be CSS only, the disabling logic should be defined by CSS.

To move the logic in the CSS definitions, you'll have to use attribute selectors. Here are some examples:

Disable link that has an exact href: =

You can choose to disable links that contain a specific href value like so:

<a href="//website.com/exact/path">Exact path</a>

[href="//website.com/exact/path"]{
  pointer-events: none;
}

Disable a link that contains a piece of path: *=

Here, any link containing /keyword/in path will be disabled:

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

Disable a link that begins with: ^=

The [attribute^=value] operator targets an attribute that starts with a specific value. It allows you to discard websites and root paths.

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

You can even use it to disable non-https links. For example:

a:not([href^="https://"]){
  pointer-events: none;
}

Disable a link that ends with: $=

The [attribute$=value] operator targets an attribute that ends with a specific value. It can be useful to discard file extensions.

<a href="/path/to/file.pdf">Link to pdf</a>

[href$=".pdf"]{
  pointer-events: none;
}

Or any other attribute

CSS can target any HTML attribute. Could be rel, target, data-customand so on...

<a href="#" target="_blank">Blank link</a>

[target=_blank]{
  pointer-events: none;
}

Combining attribute selectors

You can chain multiple rules. Let's say that you want to disable every external link, but not those pointing to your website:

a[href*="//"]:not([href*="my-website.com"]) {
    pointer-events: none;
}

Or disable links to pdf files of a specific website :

<a href="//website.com/path/to/file.jpg">Link to image</a>

[href^="//website.com"][href$=".jpg"] {
  color: red;
}

Browser support

Attributes selectors have been supported since Internet Explorer 7. And the :not() selector since Internet Explorer 9.

I used:

.current-page a:hover {
    pointer-events: none !important;
}

And that was not enough; in some browsers it still displayed the link, blinking.

I had to add:

.current-page a {
    cursor: text !important;
}

One way you could do this with CSS, would be to set a CSS on a wrapping div that you set to disappear and something else takes its place.

For example:

<div class="disabled">
    <a class="toggleLink" href="wherever">blah</a>
    <span class="toggleLink">blah</span
</div>

With a CSS like

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

To actually turn off the a, you'll have to replace its click event or href, as described by others.

PS: Just to clarify, I'd consider this a fairly untidy solution, and for SEO it's not the best either, but I believe it's the best with purely CSS.

Apply the below class on HTML.

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

Another trick is to place a invisible element above it. This will disable any hover effects as well

.myButton{
    position: absolute;
    display: none;
}

.myButton::after{
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

You can try this also

<style>
.btn-disable {
  pointer-events: none !important;
    color: currentColor;
    cursor: not-allowed;
    opacity: 0.6;
    text-decoration: none;       
}
</style>

<html>
    <head>
        <title>NG</title>
    </head>
    <style>
        .btn-disable {
          pointer-events: none !important;
            color: currentColor;
            cursor: not-allowed;
            opacity: 0.6;
            text-decoration: none;       
        }
        </style>
    <body>
        <div class="btn-disable">
            <input type="button" value="Show">
        </div>
    </body>
</html>

pointer-events:none will disable the link:

.disabled {
    pointer-events: none;
}

<a href="#" class="disabled">link</a>

simply use your tab without a link, don't include any link attribute to it.