How to Disable a Link using Only CSS

December 29, 2020 admin

In this tutorial, we are going to see how to Disable a Link using Only CSS. You can easily use the CSS pointer-events attribute to disable a link. The “none” value of this property specifies that the element is never the target of a pointer event.

Let’s try the following example to see how it works:

[st_adsense]

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>How to Disable a Link using Only CSS</title>
		<style>
			.disabled{
				cursor: default;
				pointer-events: none;        
				text-decoration: none;
				color: grey;
			}
		</style>
	</head>
	<body>
		<a href="#" class="disabled">This is a disabled link</a>
	</body>
</html>