How to Disable a Link Using Only CSS and HTML

So the real question is why would you want to disable a link? Wouldn’t it just make sense to have a none link text in its place?

Well, that could happen but as with anything web development, it is not that simple. You might want to disable a link based on certain conditions be it dynamic or served straight from the server in a disabled state.

Whatever the case, the good news is that it is not complicated in the least of terms.

CSS allows us one of the simplest ways to get this done. It is lightweight, safe, and works with all major browsers whether JavaScript is turned on or off.

You Could, of Course, Disable a Link by Simulating

You can simulate a disabled link by simply hiding the real URL with no link text then style it appropriately. From the example below, you can see how this can be achieved.

<div class="disableable">
 <a class="toggleLink" href="example.php">Some Text</a>
 <span class="toggleLink">Some Text</span
</div>

Your CSS can be as follows.

.disableable a.toggleLink { display: inline; }
.disableable span.toggleLink { display: none; }

Now all you need to do is track the even that will flip the span and the A to be either adopt the inline or none display properties.

Using the Pure CSS and HTML Solution

Here we can simplify matters even more. Taking from the previous example we can have a single line of HTML like so.

<a class="disabled" href="javascript:void(0)">Some Text</a>

We then use the class “disabled” and the “href” can be set to do nothing using the JavaScript void function call.

In your CSS you can style the URL anchor to make it look visually disabled. This is how you can do it.

.disabled {
 pointer-events: none;
 cursor: default; /*optional*/
 opacity: 0.6;
 }

With CSS you can disable all cursor events by setting pointer-events to none. The cursor can be set to default as a formality but since we are ignoring pointer-events including change of cursor this can be optional.

Finally, we give it a lowered opacity (gray) to give the user a visual cue that the link has been disabled.

There you have it. Any time you need to disable a URL you can simply add the “disabled” class to the URL tag.

Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.