How to disable submit button & links on-click in pure CSS?
One idea is to have a layer that come on the top of the element after the first click to avoid the second one.
Here is a basic idea where I will consider a duration of 1s
between two clicks that you can decrease. Try to click the button/link and you will notice that you can click again only after 1s
.
I am adding a small overlay to better see the trick
.button {
position:relative;
display:inline-block;
}
.button span{
position:absolute;
top:0;
left:0;
right:0;
bottom:100%;
z-index:-1;
animation:overlay 1s 0s; /* Update this value to adjust the duration */
transition:0s 2s; /* not this one! this one need to be at least equal to the above or bigger*/
}
.button *:active + span {
animation:none;
bottom:0;
transition:0s 0s;
}
@keyframes overlay {
0%,100% {
z-index:999;
background:rgba(255,0,0,0.2); /* To illustrate */
}
}
<div class="button">
<button>Click me</button>
<span></span>
</div>
<div class="button">
<a href="#" onclick="console.log('clicked !')">Click me</a>
<span></span>
</div>