How to disable a link using only CSS?
Last Updated :
11 Jul, 2025
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 community site
<a href=
"https://www.geeksforgeeks.org/community/">
Click Here</a>
</center>
</body>
</html>
Temporary Note on Output : On Run, The output may show a "Refuse to Connect" error due to security restrictions from the GeeksforGeeks site, which prevents embedding. To see the output, replace the src URL with one that allows iframe embedding, such as "https://www.example.com//".
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 community site
<a href=
"https://www.geeksforgeeks.org/community/">
Click Here
</a>
</center>
</body>
</html>
Temporary Note on Output : On Run, The output may show a "Refuse to Connect" error due to security restrictions from the GeeksforGeeks site, which prevents embedding. To see the output, replace the src URL with one that allows iframe embedding, such as "https://www.example.com//".