<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)
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.