How to disable a link using only CSS?

To disable a link using CSS, pointer-events property can be used, which sets whether the element in the page has to respond or not while clicking on elements. The pointer-events property is used to specify whether element show to pointer events and whether not show on the pointer.

Below example illustrate the approach:

Example 1: Below code shows the use of property-events where ‘a’ tag is disabled, with no cursor (disabled cursor pointer on ‘a’ tag)



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Disable Link using CSS</title>
    <style type="text/css">
        .not-active {
            pointer-events: none;
            cursor: default;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color: green;">GeeksforGeeks</h1>
        <h3>A Computer Science Portal for Geeks</h3>
        <b>Disabled link:</b> To visit us 
          <a href="www.geeksforgeeks.org"
             class="not-active">Click Here</a>
        <br>
        <br>
        <b>Enabled link:</b> To use our ide 
          <a href=
             "https://ide.geeksforgeeks.org/tryit.php">
            Click Here</a>
    </center>
</body>
  
</html>

chevron_right


Output: We can notice that although it looks like a link, nothing happens when we take pointer on it or click on it.

Example 2: This code shows CSS which applies to an ‘a’ tag so that it looks like, that the link is disabled, to do so, color and text-decoration property can be used.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Disable Link using CSS</title>
    <style type="text/css">
        .not-active {
            pointer-events: none;
            cursor: default;
            text-decoration: none;
            color: black;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color: green;">GeeksforGeeks</h1>
        <h3>A Computer Science Portal for Geeks</h3>
        <b>Disabled link:</b> To visit us
        <a href="www.geeksforgeeks.org" class="not-active">
          Click Here
        </a>
        <br>
        <br>
        <b>Enabled link:</b> To use our ide
        <a href="https://ide.geeksforgeeks.org/tryit.php">
            Click Here
        </a>
    </center>
</body>
  
</html>

chevron_right


Output: Here it can be seen that it does not even look like a link.
Disabled link




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.