Download Button with Progress bar for blogger & Wordpress

 Download Button

Demo

Step 1: Login to your Blogger Dashboard 

Step 2: In Blogger, create a post or page and insert the code shown below.

Step 3: Copy and paste the following code into Blogger's blog Post.

<div class="ch-button">
      <div class="button-content">
        <i class="fa-solid fa-cloud-arrow-down"></i>
        <span data-link="Enter>
_url_here" class="button-text">Download</span>
      </div>
  </div>

<style>/* <![CDATA[ */
.ch-button{position:relative;margin:auto auto 0.9375rem;padding:10px;width:40%;min-width:300px;max-width:50%;background:#7D2AE8;border-radius:55px;cursor :pointer;box-shadow:0 5px 10px rgba(0,0,0,0.2);transition:all .4s cubic-bezier(0.68,-0.55,0.265,1.55);overflow:hidden}
.ch-button.active{height:10px;width:40%;min-width:300px;max-width:50%;padding:5px}
.ch-button::before{content:"";position:absolute;top:0;left:-100%;height:100%;width:100%;background:#5b13b9;border-radius:55px;transition: all 6s ease-in-out}
.ch-button.active::before{animation:layer 6s ease-in-out forwards}
@keyframes layer {
100%{left:0}
}
.ch-button .button-content{height:100%;width:100%;display:flex;align-items:center;justify-content:center;transition:all .2s ease;transition-delay:.2s}
.ch-button.active .button-content{transform:translateY(60px)}
.ch-button .button-content i,.ch-button .button-content .button-text{color:#fff;font-size:20px;font-weight:500}
.ch-button .button-content .button-text{font-size:18px;margin-left:8px}
/* ]]> */</style>
<link href='https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro-v6@18657a9/css/all.min.css' rel='stylesheet' type='text/css'/ >

<script>//<![CDATA[
      const chbutton = document.querySelector(".ch-button"),
          _link = document.querySelector('.button-text');
    if (_link) {

    }
    chbutton.addEventListener("click", () =>{
      chbutton.classList.add("active");
      chbutton.style.pointerEvents = "none";
      setTimeout(()=>{
        let _target = _link.getAttribute('data-link');
        console.log(_target);
        chbutton.classList.remove("active");
        chbutton.querySelector("i").classList.replace("fa-cloud-arrow-down", "fa-check");
        chbutton.querySelector(".button-text").innerText = "Completed!";
        setTimeout(()=>{
        window.open(_target, '_blank');
        setTimeout(()=>{
  		chbutton.querySelector("i").classList.replace("fa-check", "fa-cloud-arrow-down")
        chbutton.querySelector(".button-text").innerText = "Download";
        chbutton.style.pointerEvents = "auto";
         },2000);
          },1000);
      },6000);
    });
//]]></script>

Conclusion

I hope you have successfully added your About Us Page. If you are facing any problem in any section or you have any question then ask us in the comment box. 

Copyright: 

Ͳɾìçҟվ ȺҍժմӀӀąհ

 

Go to Link