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. 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)
<!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 property can be used.
<!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 Click Here </a> </center> </body> </html> |
Output: Here it can be seen that it does not even look like a link.
.png)
