I would like to implement a delay on this button so that when it is clicked, there is a pause before navigating

When I add the delay, it doesn't work, and when I remove it, it does. What can I do to make this button have a href link that delays before redirecting to another page? (I'm a newbie)

I need to click and wait 3 seconds before navigating to other pages. I've tried many things but nothing seems to be working. I'm really stuck with this problem.

Thank you all for your help.

.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>

javascripthtmljquerycss

Answer №1

One way to tackle this issue is by using jQuery. Here's a method you can try:

$('.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>

Answer №2

If you're looking for a solution similar to your query, take a look at the following reference:

To implement a delay before redirecting in JavaScript, utilize the [setTimeout][1] function.

Here's an example scenario where you trigger a function upon clicking a link:

<a href="javascript:void" onclick="onBtnClickHandle()">Click Here</a>

Create a custom JavaScript function and incorporate the delay using setTimeout:

function onBtnClickHandle(){
    setTimeout(function(){ 
        window.location="https://www.google.com/"
    }, 3000);
}

You can adjust the time value according to your specific animation requirements.

Answer №3

Could this be the solution you are seeking?

<button type="button" class="btn-submit" onclick="executeAction(this, 'https\://example.com')">
  <span class="btn-text">Click Here</span>
</button>
<script>
  let timer
  function executeAction(element, redirectUrl) {
    element.classList.toggle('loading')
    if (timer) {
      clearTimeout(timer)
      timer = null
    } else {
      timer = setTimeout(() => {
        window.location.replace(redirectUrl)
      }, 2000)
    }
  </script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for updating information within a vue-component

I am working on a Vue component where I retrieve data from localStorage. Here is how I handle it: if (localStorage.getItem("user") !== null) { const obj_user = localStorage.getItem('user'); var user = JSON.parse(obj_user); } else { ...

javascriptvue.jsfrontend

What is the best way to center my text vertically within a Bootstrap 5 "col" class division?

Struggling to create a Bootstrap 5 page and facing challenges with vertically aligning text in divs? Here's the code snippet causing problems: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

htmlcssbootstrap-5

What is the best way to transfer information from df ~ to my webpage?

I'm currently working on a pie chart that visualizes the disk space usage on my Linux machine. I need help figuring out how to properly parse this data onto a microservice URL. Any assistance would be greatly appreciated. Here's what I have so f ...

javascriptnode.jsajaxlinux

Using jQuery to retrieve values from clicked buttons

I'm trying to retrieve the values of a jQuery button upon form submission, but my current setup is not working. Specifically, I need to extract the value of data-url. Below is the code snippet I am using: $("#addAgency").submit(function(event) { ...

javascriptjquery

What are some ways to change the appearance of a component using its parent?

In order to make changes to the CSS properties of a Vue component from its parent, effectively overriding any existing styles within the component, I am seeking a solution. Initially, I assumed that styling a component like <my-component> directly f ...

cssvue.jsvue-component

Formatting that differs based on whether the content appears on the left

I'm in search of a solution to align specific items to the left on left-hand pages and to the right on right-hand pages. I have come across @page :left/:right, but it seems to only affect the page layout and margins, not the actual content on the page ...

css

Modifying the Color of Individual Items within the Pagination Component in MUI

I am attempting to modify the background color of every item in my Pagination component by utilizing makeStyles. import { Pagination } from "@material-ui/lab"; import { makeStyles } from "@material-ui/core"; const pagination = makeStyl ...

javascriptcssreactjsmaterial-ui

Regularly updating a book's interactive pages with turn.js technology

I experimented with generating dynamic content in turn.js using the sample provided here. This is an excerpt of the code I have written: <body> <div id="paper"> </div> </body> <script type="text/javascript"> $(win ...

javascriptjqueryajaxturnjs

Enter text into a field on a different webpage and verify if the output matches the expected result

Possible Duplicate: Exploring ways to bypass the same-origin policy I'm facing a scenario where I have a form on my website that requires validation of a number. The validation process involves checking this number against another website where e ...

javascriptjqueryhtmlajax

Can const variables be reassigned in JavaScript programming?

Can you reassign a const variable in JavaScript? In C++, we can cast variables to and from const. Is there something similar in JavaScript? My question is const a = 1; unconst(a); a = "xyz"; a === "xyz" // true I'm not referring to object prope ...

javascriptvariables

What is the most effective way to retrieve the inner HTML of an HTML tag using JavaScript or jQuery?

Let's consider the following code snippet: <p class="question"> this is my paragraph <p> And i'm inside tag in question class <h1> And this is my heading</h1> </p> </p> Now, the challenge is t ...

javascriptjqueryhtmlcss

Our list of divs all have the same classes, but I need to remove one that contains an element with a specific class

I am trying to remove the <div class="chrg-item> element that contains an image with the class .gr, but my current code is not working properly! $('.chrg-item').hasClass('.gr').remove() <div class="chrg-item"> <img src= ...

jquery

Does CSS delayed visibility transition fail to activate JavaScript transitionend event for elements' visibility changes?

My current approach involves using a clever method to delay the transition of visibility, in combination with opacity. So far, everything is working smoothly: <body> <button>run</button> <div class="box"></div> & ...

javascriptcsscss-transitions

Utilizing the Bootstrap grid system to seamlessly display images

I have been attempting to design a column that is divided into two nested columns, each containing images that should fill the entire height and width of their respective columns. However, I am facing an issue where the images are extending beyond the boun ...

htmlcsstwitter-bootstrap

Count of elements in one flexbox row

Having a flexbox container with multiple items in row-wrap format, is there a way to use JavaScript to determine the number of items in each row? Essentially, finding out at what point they wrap. For instance- <div class="container"> <div clas ...

javascriptcssflexbox

Unable to find the locally stored directory in the device's file system using Nativescript file-system

While working on creating an audio file, everything seems to be running smoothly as the recording indicator shows no errors. However, once the app generates the directory, I am unable to locate it in the local storage. The code I am using is: var audioFo ...

javascripttypescriptnativescript

Tips on preventing a lone track in Laravel for Server Sent Events

In my Laravel app, I am exploring the use of Server Sent Events. The issue I have encountered is that SSE requires specifying a single URL, like this: var evtSource = new EventSource("sse.php"); However, I want to send events from various parts/controlle ...

javascriptphphtmllaravelserver-sent-events

Novice problem with the <div> tag

I am currently in the process of developing a website, and I have encountered an issue with the title not staying within the designated div box at the top of the page. <div style="width:1000px;height:40px;background:grey;border:3px solid;border-radiu ...

htmlcss

Navigating over two JSON arrays using Ajax

My goal is to fetch data from a JSON file by utilizing the ID obtained from a previous AJAX call and looping through the second array based on the retrieved ID. I have attempted to achieve this with the following code: $(document).on('click', ...

javascriptphpjqueryjsonajax

Enhancing choices for a select tag that is generated dynamically

I am encountering challenges while adding options to the dynamically generated select tags using jQuery. The options are fetched from a database, and I want to display all these options for each dynamically created select tag. Could you please point out w ...

javascriptjqueryajax