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":

Create HTML

Create an anchor tag with a class "disabled".

How to 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 the element will not respond to pointer events.
Set the cursor to its "default" value to disable the anchor tag.

How to style an HTML element using CSS pointer-events and cursor properties?

.disabled {
  pointer-events: none;
  cursor: default;
}

Here’s the full example.

Example of disabling a link on the current page:

An example of how to disable links 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>

Try it Yourself »

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:

An example of how to disable links on the current page using CSS pointer-events, cursor, 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>

Try it Yourself »

The following example demonstrates how to style a link to look disabled and prevent interaction using pointer-events, opacity, and cursor. Note that the user-select property only prevents text selection and does not disable link clicks or navigation.

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

Example of styling a link to look disabled and prevent interaction:

An example which shows the difference between disabled and active links

<!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[aria-disabled="true"].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/" aria-disabled="true" class="button">Disabled</a>
    <a href="https://www.w3docs.com/" class="button">Click here</a>
  </body>
</html>

Try it Yourself »

Note that pointer-events: none also removes keyboard focus, which impacts accessibility. For better accessibility, consider using aria-disabled="true" and handling focus states with JavaScript if keyboard navigation is required.