I want to add to my button a cooldown but I have no clue how - html

Question

It's a React.Js Website. If you know how I can add a cooldown to that button it would help me a lot since it would make the Contact Me page better. I didn't include all the code
for more information add my Discord: uvejs#5162
import "./contactpage.css"
import Footer from "../../Components/Footer/Footer";
import Navbar from "../../Components/Navbar/Navbar";
import React, { useRef, useState } from 'react';
import emailjs from '#emailjs/browser';
const initialInputs = {
return (
<div className="group">
<Navbar />
<form action="" ref={form} onSubmit={sendEmail} className="contact-form">
<label className="form-input-label" > Your Name
<input required name="from_name" value={inputs.from_name} onChange={handleChange} className="form-input" type="text" />
</label>
<br />
<label required className="form-input-label"> Your Email
<input name="from_email" value={inputs.from_email} onChange={handleChange} className="form-input" type="text" />
</label>
<br />
<label required className="form-input-label" > About Your Project
<input name="message" value={inputs.message} onChange={handleChange} className="form-input" type="text" />
</label>
<button className="custom-button" > Send </button>
</form>
<Footer />
</div>
)
}
export default Contact;

Answer 1

You can follow this code pen link - cooldown button
$('button.cooldown').click(function(){
var btn = $(this);
btn.prop('disabled', true);
setTimeout(function(){
btn.prop('disabled', false);
},15000);
});
$buttonBaseColor: #336699;
$disableDuration: 15s;
button.cooldown{
background: $buttonBaseColor;
min-height: 48px;
min-width: 144px;
position: relative;
margin: 5px;
border-radius: 5px;
border: 0;
color: #fff;
padding: 0 15px;
font-size: 16px;
outline: none;
overflow: hidden;
cursor: pointer;
&:active, &:focus{
outline: none;
}
&:disabled{
background: darken($buttonBaseColor, 10%);
color: darken(#fff, 15%);
cursor: default;
box-shadow: inset 3px 3px 10px 0px rgba(0,0,0,0.2);
&:after{
content: '';
position: absolute;
bottom: 0;
width: 100%;
left: 0;
height: 5px;
background: darken($buttonBaseColor, 20%);
animation: cooldown $disableDuration linear;
}
}
}
#keyframes cooldown {
0% { width: 100%; }
100% { width: 0; }
}
/* layout stuff */
section{
text-align: center;
margin-top: 100px;
color: #333;
}
p{font-size: 12px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<button class="cooldown">Push Me!</button>
<p>This button has a cool down of 30s until re-enabled</p>
</section>