<div class="container">
  <p class="container__explanation">When you click this button, it will become disabled.</p>
  <p class="container__explanation">All you need is <code>onclick="this.disabled = true"</code></p>
  
  <button class="btn" onclick="this.disabled = true">
    Click Me
  </button>
  
  <p class="container__explanation hint">(the js section of this pen resets the disabled state after 3 seconds)</p>
</div>
body {
  background-color: #ddd;
  display: flex;
  justify-content: center;
  padding: 20px;
}

.container {
  align-items: center;
  background-color: #33ccbb;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
  
  &__explanation {
    font-family: sans-serif;
    font-size: 1.1rem;
    margin-bottom: 0;
    text-align: center;
  }
}

code {
  background-color: #33333355;
  border-radius: 2px;
  padding: 4px 5px 1px;
}

.btn {
  border: solid #aaa 1px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 2rem;
  margin: 40px;
  padding: 14px;
  
  &:disabled {
    opacity: .9;
  }
}

.hint {
  color: #333333ee;
  font-style: italic;
  font-size: .9rem;
}
View Compiled
const btn = document.querySelector('.btn')

btn.addEventListener('click', e => {
  setTimeout(() => {
    btn.disabled = false
  }, 3000)
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.