How to disable a button or a link

Short answer

Add the disabled attribute to the button — it cannot be pressed or reached with the keyboard:

<button>Active</button>
<button disabled>Disabled</button>

Styling a disabled button

The :disabled pseudo-class sets your own styles for this state:

<style>
  .btn { padding: 10px 20px; border: 0; border-radius: 8px; background: rebeccapurple; color: white; cursor: pointer; }
  .btn:disabled { background: silver; cursor: not-allowed; }
</style>
 
<button class="btn">Pay</button>
<button class="btn" disabled>Pay</button>

Disabling a link

A link has no disabled attribute. The most reliable way is to remove its href: without it <a> stops being a link — it cannot be clicked or reached with Tab. Add aria-disabled="true" so a screen reader announces the state, and style it with the a:not([href]) selector:

<style>
  a:not([href]) { color: gray; cursor: not-allowed; }
</style>
 
<a href="#">Next page</a> ·
<a aria-disabled="true">Previous page</a>

Common mistake

A link is "disabled" with pointer-events: none only. The mouse indeed cannot click it, but the keyboard still reaches it with Tab and opens it with Enter:

<a href="https://example.com" style="pointer-events: none; color: gray;">Still reachable with Tab</a>