バーストパーティクルボタン

<div class="d08-09-10-stage">
          <button class="d08-09-10-btn" type="button">クリック！</button>
        </div>

.d08-09-10-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
        .d08-09-10-btn{background:linear-gradient(135deg,#ffb020,#ff7a45);color:#fff;border:none;border-radius:12px;padding:14px 28px;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(255,122,69,.35);position:relative;z-index:2}
        .d08-09-10-particle{position:absolute;top:50%;left:50%;width:7px;height:7px;border-radius:50%;pointer-events:none;opacity:0}
        .d08-09-10-particle.is-go{animation:d08-09-10-burst .6s ease-out forwards}
        @keyframes d08-09-10-burst{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}

(function(){
        var stage=document.querySelector('#item-08-09-10 .d08-09-10-stage');
        var btn=document.querySelector('#item-08-09-10 .d08-09-10-btn');
        if(!stage||!btn)return;
        var colors=['#ffb020','#ff5470','#6a5cff','#22c55e','#38bdf8'];
        btn.addEventListener('click',function(){
          for(var i=0;i<12;i++){
            (function(i){
              var p=document.createElement('span');p.className='d08-09-10-particle is-go';
              var angle=(Math.PI*2/12)*i+(Math.random()*0.3-0.15);
              var dist=45+Math.random()*35;
              p.style.setProperty('--dx',(Math.cos(angle)*dist)+'px');
              p.style.setProperty('--dy',(Math.sin(angle)*dist)+'px');
              p.style.background=colors[i%colors.length];
              stage.appendChild(p);
              setTimeout(function(){p.remove();},650);
            })(i);
          }
        });
      })();