Как сделать кнопку или ссылку неактивной

Короткий ответ

Кнопке добавьте атрибут disabled — её нельзя нажать и выбрать с клавиатуры:

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

Оформление неактивной кнопки

Свои стили для такого состояния задаёт псевдокласс :disabled:

<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>

Отключить ссылку

У ссылки нет атрибута disabled. Надёжнее всего убрать у неё href: без него <a> перестаёт быть ссылкой — на неё нельзя нажать и перейти по Tab. Добавьте aria-disabled="true", чтобы скринридер сообщил о состоянии, и оформите её через селектор a:not([href]):

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

Частая ошибка

Ссылку «отключают» только свойством pointer-events: none. Мышью её действительно не нажать, но клавиатура по-прежнему доходит до неё через Tab и открывает по Enter:

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