Is it possible to make an HTML anchor tag not clickable/linkable using CSS?

html

link-style

user-experience

accessibility

byAlex Kataev·Aug 19, 2024

Make an <a> tag unclickable with CSS by using this snippet:

.no-click {
  pointer-events: none;
  cursor: default;
}

And apply the class directly:

<a href="#" class="no-click">Hello, I am unclickable!</a>

pointer-events: none; takes the clickability off the link, and cursor: default; replaces the iconic hand cursor with a standard arrow, further stressing the deactivated state of the link.

Exploring link style alteration

Fine-tuning the look

With functionality sorted, you can also turn off the visual alarms of hyperlinks:

a.no-click {
  color: currentColor;           /* Blends with text */
  text-decoration: none;         /* Goodbye, underline */
}

This brings the <a> elements in line with regular text.

Overlay strategy: a tale of layers

Using an element to cover the link with greater z-index is another JavaScript-independent solution:

<div class="link-overlay">
  <a href="#" class="underneath-link">I'm covered, hence unclickable!</a>
</div>

.link-overlay {
  position: relative;
  z-index: 1;
}

.underneath-link {
  position: absolute;
  z-index: -1;
}

The link still shows, but is actually concealed by an invisible div on top, hence, it's unclickable.

Usability: keeping user confusions at bay

Keep in mind, users might be puzzled when a seemingly clickable link is inactive. You need to remedy this by clear visual hints.

Code for dynamic content & advanced cases

Keeping non-clickable consistent

In single-page applications or AJAX-loaded content, the content changes. Therefore, non-clickable styles need to be implemented consistently using the same class, such as .no-click, across the entire application.

Beyond CSS: JavaScript

While this post is CSS-focused, you're reminded that JavaScript or jQuery provide finer control, like allowing link clicks conditionally:

$('a').click(function(event){
  if (noDoorHere) { // "Sorry, this door is painted on. Go around."
    event.preventDefault();
  }
});

However, this stab at JavaScript introduces additional complexity and a need for it, which isn't perfect for simpler use-cases.

Mind the accessibility

Keep an eye on accessibility—make sure screen readers or keyboard navigation handle the link-turned-text properly. You might have to remove or edit the href attribute or add tabindex="-1" to avoid focus.

Let the user know

Provide the user some clarity if there are non-clickable elements on the page, maybe through a tooltip or color opacity:

a.no-click:hover {
  opacity: 0.5; /* Hello ghost link */
}

a.no-click::after {
  content: " (Currently closed)"; /* Additional visual cue */
}

Responsive adaptation

Assess how your non-clickable links behave across devices and screen sizes:

@media (hover: none) {
  .no-click {
    pointer-events: auto; /* No hover? Doors open */
  }
}

Media queries can alter the behavior for touch devices without hover features. For them, pointer-events could be set to auto.

Transition magic

Add transition effects for that polished look:

a.no-click {
  transition: color 0.3s ease; /* In case of sudden movement, stay calm */
}

a.no-click:hover {
  color: grey; /* Grey - The universal sign of "nope" */
}