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.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
04 Aug, 2023
Like Article
Save Article