How to Disable Links on the Current Page with Pure CSS

If you want to disable links on the current page, read this snippet and try it for yourself.

The idea is the following - don't have links to the same page you are on. It is when you see a link, but it does nothing when clicked because it will bring you to the same page you are on.

You can disable a link using the CSS pointer-events property which specifies whether the element in the page has to respond or not while clicking on it.

Let’s see the following code that shows the use of pointer-events where the <a> tag is disabled with the cursor property set to "default":

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Create an anchor tag with a class "disabled".
<h2>Disable link on current page</h2>
<a href="https://www.w3docs.com/" class="disabled">Click Here</a>

Add CSS

  • Set the pointer-events to "none", so as the element will never react to pointer-events.
  • Set the cursor to its "default" value to disable the anchor tag.
.disabled {
  pointer-events: none;
  cursor: pointer;
}

Here’s the full example.

Example of disabling a link on the current page:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .disabled {
        pointer-events: none;
        cursor: default;
      }
    </style>
  </head>
  <body>
    <h2>Disable link on current page</h2>
    <a href="https://www.w3docs.com/" class="disabled">Click Here</a>
  </body>
</html>

As you see, though it looks like a link, nothing happens when we want to click on it.

In the following example, the text-decoration and color properties are applied to the <a> tag so that it looks like a link is disabled.

Example of disabling a link on the current page using the text-decoration and color properties:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .disabled {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
        color: #000000;
      }
    </style>
  </head>
  <body>
    <h2>Disable link on current page</h2>
    <a href="https://www.w3docs.com/" class="disabled">Click Here</a>
  </body>
</html>

You can also disable a link on the current page setting the user-select property to "none".

Let’s see an example, which shows the difference between disabled and active links.

Example of disabling a link on the current page using the user-select property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a.button,
      button {
        display: inline-block;
        padding: 20px 55px;
        margin: 20px 10px;
        line-height: 18px;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border: 0;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        background-color: #8ebf42;
        text-decoration: none;
        color: #ffffff;
      }
      a[disabled].button,
      button[disabled] {
        cursor: not-allowed;
        opacity: 0.4;
        pointer-events: none;
        -webkit-touch-callout: none;
      }
      a.button:active:not([disabled]),
      button:active:not([disabled]) {
        background-color: #cccccc;
        color: #2a2a2a;
        outline: 0;
      }
    </style>
  </head>
  <body>
    <h2>Disable link on current page</h2>
    <a href="https://www.w3docs.com/" disabled="disabled" class="button">Disabled</a>
    <a href="https://www.w3docs.com/" class="button">Click here</a>
  </body>
</html>