Popup Timer Download Button

Price:     00.00

 ✔No Encrypted Scripts
 ✔Custom Footer Credits
 ✔One Time Payment
 ✔Lifetime Template Updates
 ✔12 Months of Premium Support

Css Code

<style> .button { font-size: 1em; padding: 10px; color: #fff; border: 2px solid #06D85F; border-radius: 20px/50px; text-decoration: none; cursor: pointer; transition: all 0.3s ease-out; } .button:hover { background: #06D85F; } .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay:target { visibility: visible; opacity: 1; } .popup { margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; width: 30%; position: relative; transition: all 5s ease-in-out; } .popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; } .popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .popup .close:hover { color: #06D85F; } .popup .content { max-height: 30%; overflow: auto; } @media screen and (max-width: 700px){ .box{ width: 70%; } .popup{ width: 70%; } } </style> <style type='text/css'> /* Download Counter Box */ #btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#25D366;color:#ffffff;float:center;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#bb0000;color:#ffffff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#282828;color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-downx{padding:20px;background:#f7f7f7;border-bottom-center-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:14px}#downloadx{float:right}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#282828;float:center;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:center}.file-deskripsi{display:block}.file-deskripsi span{margin-right:3px} @media screen and (max-width:640px){.batas-downx{float:none;width:100%}} @media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, a#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}} </style>

Html Code

<div style="text-align: center;"> <div class="box"> <a class="button" href="#popup1">Demo Popup Button</a> </div></div> <br> <div id="popup1" class="overlay"> <div class="popup"> <p><b>Please Click Download Button</b></p> <a class="close" href="#">×</a> <div class="content"> <div style="text-align: center;"> <button onclick="generate()" id="btnx">Download Now</button> <a id="downloadx" href="https://www.digitalsantal.com/2023/04/popup-timer-download-button.html" style="display:none"> Re-download</a> </div> </div> </div> </div>