Countdown Timer For Download Files Automatically - HTML, CSS & Javascript
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.download-container{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.download-btn{
position: relative;
background: #4285F4;
color: #fff;
width: 260px;
padding: 18px 0;
text-align: center;
font-size: 1.3em;
font-weight: 400;
text-decoration: none;
border-radius: 5px;
box-shadow: 0 5px 25px rgba(1 1 1 / 15%);
transition: background 0.3s ease;
}
.download-btn:hover{
background: #2874F3;
}
.download-btn i{
margin-left: 5px;
}
.countdown{
font-size: 1.5em;
font-weight: 700;
margin-bottom: 20px;
}
.countdown span{
color: #0693F6;
font-size: 1.5em;
font-weight: 800;
}
.pleaseWait-text{
font-size: 1.1em;
font-weight: 600;
display: none;
}
.manualDownload-text{
font-size: 1.1em;
font-weight: 600;
display: none;
}
.manualDownload-link{
color: #0693F6;
font-weight: 800;
text-decoration: none;
}
Comments
Post a Comment