How to disable a link using only CSS

Mastering the specifics

CSS hover effects

To visibly communicate your disabled link to users, augment your CSS:

.disabled-link:hover,
.disabled-link:active,
.disabled-link:focus {
  color: #808080; /* Gray again! */
  cursor: not-allowed; /* Reinforcing the IRON CURTAIN between interaction and frustration */
  text-decoration: none; /* Seriously, who came up with underlined text? */
}


Accessibility for everyone

Implementing aria-current="page" informs screen readers about navigation current state. However, accessibility in CSS is pretty stubborn and refuses to disable functionalities.

Age ain't nothing but a number

Older browsers might be grumpy and refuse to follow pointer-events. Be prepared to provide alternative methods or coffee for piqued users.

Let bootstrap kick in

Are you a Bootstrap user? Try the .disabled class which visually blends disabled links with existing framework styles:

a.disabled-link.btn.disabled {
  pointer-events: none; /* Seriously, it's like talking to a brick wall */
  /* And adhere to Bootstrap protocols */
}


Pro-tips: Going beyond basic disables

All-round deactivation

Despite pointer-events: none making a link visually non-interactive, certain users could still access it. To ensure absolute deactivation, consider removing the href attribute or utilizing JavaScript — a hefty decision indeed!

Semantics aren't just for linguists

Semantically-strong documents thrive on well-defined roles like role="button". But don't mix roles with states. Even though they're peas in a pod, they don't always agree.

User experience

A CSS-disabled link could be, well, confusing, especially due to lack of typical user-interactive responses. Understand your audience and adapt your design patterns accordingly.

True deactivation

To fully disable a link, including from keyboard users, you may need to triage the situation. The CSS scalpel cuts incisively but not always deeply enough.