Open In App

How to disable a link using only CSS?

Improve
Improve
Like Article
Like
Save
Share
Report

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

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=
            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: 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=
            Click Here
        </a>
    </center>
</body>
 
</html>


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

Disabled link



Last Updated : 04 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads