when i add its not delay then removes it. and its delay, but what should i do to make this button have href to click and delay then joining other pages (i'm newbie)
conclude that I need when I click and reload 3 seconds to join other pages I do. I tried many things but it didn't work. I'm very worried about my problem.
Thanks you all.
.button {
position: relative;
padding: 1px 20px;
background-color: #4bb34e;
border: none;
outline: none;
border-radius: 2px;
width: 100px;
cursor: pointer;
line-height: 1.33;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -10px;
transition: 0.5s;
}
.button:hover span {
padding-right: 20px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.button:active {
background: #4CAF50;
}
.button__text {
font: bold 16px "Quicksand", san-serif;
color: #ffffff;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 4px solid transparent;
border-radius: 50%;
}
.button--loading .button__text {
visibility: hidden;
opacity: 0;
}
.button--loading::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 4px solid transparent;
border-top-color: #ffffff;
border-radius: 50%;
animation: button-loading-spinner 1s ease infinite;
}
input,
p {
font: 17px Calibri;
padding: 3px 5px;
}
@keyframes button-loading-spinner {
from {
transform: rotate(0turn);
}
to {
transform: rotate(1turn);
}
}<button type="button" class="button" onclick="setTimeout(() => this.classList.toggle('button--loading'), 1500)">
<span class="button__text">Submit</span></button>I use jquery to fix this, try this method:
$('.button').click(function() {
$('.button').addClass("button--loading");
setTimeout(function() {
location.href = 'https://stackoverflow.com/'; // replace your URL
}, 3000);
});.button {
position: relative;
padding: 1px 20px;
background-color: #4bb34e;
border: none;
outline: none;
border-radius: 2px;
width: 100px;
cursor: pointer;
line-height: 1.33;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -10px;
transition: 0.5s;
}
.button:hover span {
padding-right: 20px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.button:active {
background: #4CAF50;
}
.button__text {
font: bold 16px "Quicksand", san-serif;
color: #ffffff;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 4px solid transparent;
border-radius: 50%;
}
.button--loading .button__text {
visibility: hidden;
opacity: 0;
}
.button--loading::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 4px solid transparent;
border-top-color: #ffffff;
border-radius: 50%;
animation: button-loading-spinner 1s ease infinite;
}
input,
p {
font: 17px Calibri;
padding: 3px 5px;
}
@keyframes button-loading-spinner {
from {
transform: rotate(0turn);
}
to {
transform: rotate(1turn);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="button">
<span class="button__text">Submit</span></button>You can check this, which is similar to your question :
https://stackoverflow.com/a/69774273/17282751
Use the JavaScript [setTimeout][1] function to delay your redirect.
For example, if you have a link as below, call the function on link click:
<a href="javascript:void" onclick="onBtnClickHandle()">Click Here</a>
Create a JavaScript function and add the delay using the setTimeout function:
function onBtnClickHandle(){
setTimeout(function(){
window.location="https://www.google.com/"
}, 3000);
}
You can set the timeout value as per your animation timing.
maybe you are looking for this
<button type="button" class="button" onclick="waitAndRedirect(this, 'https\://google.com')">
<span class="button__text">Submit</span>
</button>
<script>
let id
function waitAndRedirect(elem, url) {
elem.classList.toggle('button--loading')
if (id) {
clearTimeout(id)
id = null
} else {
id = setTimeout(() => {
window.location.replace(url)
}, 3000)
}
}
</script>