<div class="parent blue">
  <div class="box" inert>
    <code>inert = true</code>
    <button>You can't click me!</button>
  </div>
  <div class="box">
    <code>inert = false</code>
    <button>Click me!</button>
  </div>
</div>

[inert], [inert] * {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

button {
  cursor: pointer;
  padding: 0.5rem;
  font-size: 1rem;
  background: var(--yellow);
  border: 2px solid;
  border-radius: 0.5rem;
}

* {
	margin: 0;
	padding: 0;
}

.parent {
  height: 100vh;
}

.box {
  margin: 2rem 20%;
  display: flex;
  justify-content: space-evenly;
}