紙吹雪お祝いボタン

<div class="d08-09-03-stage">
          <button class="d08-09-03-btn" type="button">達成する</button>
        </div>

.d08-09-03-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
        .d08-09-03-btn{background:linear-gradient(135deg,#6a5cff,#ff5470);color:#fff;border:none;border-radius:12px;padding:14px 30px;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 10px 22px rgba(106,92,255,.3)}
        .d08-09-03-piece{position:absolute;top:50%;left:50%;width:8px;height:12px;pointer-events:none;opacity:0}
        .d08-09-03-piece.is-go{animation:d08-09-03-fall .9s ease-out forwards}
        @keyframes d08-09-03-fall{0%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.6)}}

(function(){
        var stage=document.querySelector('#item-08-09-03 .d08-09-03-stage');
        var btn=document.querySelector('#item-08-09-03 .d08-09-03-btn');
        if(!stage||!btn)return;
        var colors=['#ff5470','#6a5cff','#22c55e','#ffb020','#38bdf8'];
        btn.addEventListener('click',function(){
          for(var i=0;i<16;i++){
            (function(i){
              var p=document.createElement('span');p.className='d08-09-03-piece is-go';
              var angle=Math.random()*Math.PI*2;
              var dist=60+Math.random()*70;
              var dx=Math.cos(angle)*dist,dy=Math.sin(angle)*dist-40;
              p.style.setProperty('--dx',dx+'px');
              p.style.setProperty('--dy',dy+'px');
              p.style.setProperty('--rot',(Math.random()*360-180)+'deg');
              p.style.background=colors[i%colors.length];
              stage.appendChild(p);
              setTimeout(function(){p.remove();},950);
            })(i);
          }
        });
      })();