Download Progress Button

<button class="pb" id="pb"><span class="pb-label">Download</span><span class="pb-fill" id="pbFill"></span></button>

body{background:#f6f7fa}
.pb{position:relative;min-width:200px;height:52px;border:0;border-radius:12px;background:#e2e6ef;cursor:pointer;overflow:hidden;font:700 15px/1 system-ui,sans-serif}
.pb-label{position:relative;z-index:1;color:#1a1f36;mix-blend-mode:difference;filter:invert(1)}
.pb-fill{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(135deg,#ff7a18,#ff477e)}

var pb=document.getElementById('pb'),fill=document.getElementById('pbFill'),label=pb.querySelector('.pb-label'),busy=false;
pb.onclick=function(){if(busy)return;busy=true;var p=0,t=setInterval(function(){p+=Math.random()*15;if(p>=100){p=100;clearInterval(t);label.textContent='Done ✓';setTimeout(function(){fill.style.width='0';label.textContent='Download';busy=false},1400)}fill.style.width=p+'%'},120)};