Disabling a link using CSS

CSS | Disabling link: Here, we are going to learn how to disable a link using CSS (Cascading Style Sheet)?
Submitted by Anjali Singh, on January 17, 2020

Question:

Links are one of the most essential aspects of any web page or website. They play a very important role in making our website or web page quite responsive or interactive. So the topic for discussion is quite perplexing, why would anyone want to disable the links from their web page websites? Even, if you do want to achieve that why did you include that link which you wish to remove from your website or a web page in the first place? This all sounds quite weird but one can only learn! Therefore, we should not ignore such challenging tasks and should try to come up with a solution to that problem.

Trivia:

As said earlier links are very important in a web page or website because they help in navigation or to highlight some very crucial information on that website or web page and for many other purposes the links can be used. Links are the fundamental elements of the web pages or websites and must be included to make the websites or web pages to make them responsive or highly interactive. It is a very good practice to include various links in your page as your page or site appears to be very informative and a one-gateway to the other pages, which makes the work of the users quite easy and they will not have to search for that particular piece of information somewhere else when that information is just link away!

Although there are various steps and methods that you can use to disable links from your web page or website and those methods include JavaScript, HTML, etc but the focus here is to disable the link using CSS. You must be wondering about the solution by now, but there is nothing to worry about as the answer to this problem is quite very simple. So without much adieu let us move forward.

Answer:

To disable links using CSS, what you can do is you can set the pointer-events to none. That’s right, easy, isn’t it? All you have to do is set the pointer-events property of that particular link that you wish to remove from your site or web page to none and voila! The link is disabled. So go why don’t you go ahead and try this yourself. The syntax below might also help you.

Syntax:

    Element{
        pointer-events:none;
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <title>Disable Link using CSS</title>
    <style>
        .disabled {
            pointer-events: none;
            cursor: default;
        }
    </style>
</head>

<body>
    <b>Disabled link:</b> visit our website <a href="https://www.includehelp.com/" class="disabled">IncludeHelp</a>
    <br>
    <br>
    <b>Enabled link:</b> visit our wesbite
    <a href="https://www.includehelp.com/"> IncludeHelp</a>
</body>

</html>

Output

In the above example, to view the difference move your cursor on the above two links and click on them.

Advice:

Though, you must not disable links from your web page or website unless it is very necessary because why include them in the first place?

CSS Tutorial & Examples »

Disable text selection highlighting using CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples