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: '0bb'; 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>
Advertisement
Answer
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: '0bb'; 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>