HTML/CSS – Make a link element disabled with CSS

This post shows you how to make an HTML <a> link element disabled with CSS approach.

To do this, we simply style the following CSS:

a.disabled {
    pointer-events: none;
    color: gray;
}

Here is an example showing how to disable a link element with CSS. Click on the “Run Example” button to see how it works.

example.htmlRun Example
<!DOCTYPE html>
<html>
<head>
    <title>HTML/CSS - Make a link element disabled with CSS | ByteNota</title>

    <style type="text/css">
        a { text-decoration: none }
        a.disabled {
            pointer-events: none;
            color: gray;
        }
    </style>
</head>
<body>

    <a href="https://google.com" class="disabled">Go to Google.com (This link is disabled)</a>

</body>
</html>