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.

property-events
property-events property of CSS controls the responds of HTML elements for any mouse/touch events. While setting disable attribute, none of the elements will react for any action which is assigned.

Syntax:

property-events: auto | none

Minimum Browser Support: Google Chrome 2.0, Internet Edge 11.0, Mozilla 3.6, Safari 4.0, Opera 9.6 and above

Example
HTML Code 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>
    <a href="www.geeksforgeeks.org" class="not-active">Click Here</a>
</body>
</html>

chevron_right


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

HTML Code 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>
    <a href="www.geeksforgeeks.org" class="not-active">Click Here</a>
</body>
</html>

chevron_right


Output:
output2

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



My Personal Notes arrow_drop_up

सर्वशक्तिशाली इकलौता

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.