cuando agrego no se retrasa y luego lo elimina. y su retraso, pero ¿qué debo hacer para que este botón tenga href para hacer clic y retrasar luego unirse a otras páginas (soy novato)
Concluyo que necesito cuando hago click y recargo 3 segundos para unirme a otras paginas que hago. Intenté muchas cosas pero no funcionó. Estoy muy preocupada por mi problema.
Gracias a todos.
.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>Yo uso jquery para arreglar esto, prueba este método:
$('.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>Puede verificar esto, que es similar a su pregunta:
https://stackoverflow.com/a/69774273/17282751
Use la función JavaScript [ setTimeout ][1] para retrasar su redireccionamiento.
Por ejemplo, si tiene un enlace como el siguiente, llame a la función al hacer clic en el enlace:
<a href="javascript:void" onclick="onBtnClickHandle()">Click Here</a> Cree una función de JavaScript y agregue el retraso usando la función setTimeout :
function onBtnClickHandle(){ setTimeout(function(){ window.location="https://www.google.com/" }, 3000); }Puede establecer el valor de tiempo de espera según el tiempo de su animación.
tal vez estés buscando esto
<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>