How to disable a link using only CSS?

Last Updated : 17 Sep, 2024

To disable a link using CSS, pointer-events 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 the element should respond to pointer events or not. The following example illustrates this approach:

Pointer-Events Property Values:

Value	Description
none	Disables all pointer events (clicks, hovers, etc.).
auto	Default value; the element behaves normally and responds to pointer events.
inherit	Inherits the `pointer-events` property from its parent element.
initial	Sets the property to its default value (`auto`).

Disable a link using CSS Examples

Example 1: Demonstrating the Use of Pointer-Events to Disable an ‘a’ Tag

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

html

<!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>

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: Disabling an ‘a’ Tag Using Color and Text-Decoration Properties

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 properties can be used.

html

<!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>