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.
Please Login to comment...