LAST UPDATED: AUGUST 5, 2021
How to Disable a Link using Only CSS?
The disabled attribute which is used to disable HTML elements does not work with the links. We can disable links on a webpage using CSS only.
In this tutorial, we will be learning about the property used to disable links.
Disabling a link using CSS property
To disable a link using CSS, use pointer-events property and use none value to pointer-events property.
Example: Disable link using CSS
Here is an example to disable links using CSS pointer-events property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.disabled {
pointer-events: none;
}
</style>
</head>
<body>
<h2>Disable a link using CSS </h2>
<p> The links will not work as it gas been disabled</p>
<a href="https://www.studytonight.com/" class="disabled"> Click Here</a>
</body>
</html>
Output
Here is the output of the above program.
Example: Adding color and text decorations to disable link
In the above example, the link is similar to the active link. We can differentiate the disabled link from the active link by adding some color and text-decoration properties.
Conclusion
In this tutorial, we have learned to disable a link Using CSS. The pointer-events: none is used to disable the link. Further, we can customize the disabled link with color and text-decoration properties.
