Button that changes colour and disables temp whilst customer is in checkout

Question

I am wondering how I can make a store button that is Black that changes colour (blue)for a set amount of time when clicked (eg. 2 mins whilst customer is checking out) and then changes to a different colour (red) when that product has been bought. I hope I have explained it well, but this has been baffling me for ages, I know how to code a buy button for a product buy the whole changing colour is messing with my mind. this is the button i have this far - https://codepen.io/ukswiftx/pen/wZwbXy enter code here Thanks in advance

Answer 1

I really hope my answer will help you or inspire you to find the final solution to your problem even though i did not fully understand your question

html button

<input id="checkout" type="button" value="click" />

Javascript

var col = "default";//keep the color string
setInterval(function() {
  if (col == "default") {
    $("#checkout").css("background-color", "blue");
    col = "blue";
  } else if (col == "blue") {
    $("#checkout").css("background-color", "red");
  } 
}, 3000);// 3 second interval you can change it to 12000 for 2 min
$("#checkout").on("click", function() { // on click change color to black
  $("#checkout").css("background-color", "black");
})

you can check the solution jsfiddle