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>