Disable a Link Using Only CSS

Overview

This guide explains how to disable an anchor (<a>) link using only CSS, without JavaScript.

Example

We use the pointer-events: none; and color: gray; properties to visually and functionally disable the link.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disable Link with CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <a href="https://www.example.com" class="disabled-link">Disabled Link</a>
</body>
</html>

CSS

.disabled-link {
    pointer-events: none; /* Disables clicking */
    color: gray; /* Changes color to indicate disabled state */
    text-decoration: none; /* Removes underline */
    cursor: default; /* Changes cursor to default */
    opacity: 0.6; /* Reduces visibility to indicate it's disabled */
}

How It Works

pointer-events: none; prevents the link from being clicked.
color: gray; changes the text color to indicate it is disabled.
text-decoration: none; removes the default underline.
cursor: default; sets the cursor to the default arrow instead of a hand.
opacity: 0.6; makes it look visually disabled.

Notes

This method only works visually. The link still exists in the HTML source.
If JavaScript is enabled, you can also prevent default behavior using event.preventDefault().

References

GeeksforGeeks Article

sejalyadav0818/Disable a Link Using Only CSS.md