移動するフォーカスリング付きボタン群

<div class="d08-10-01-group" role="group" aria-label="操作ボタン">
          <button class="d08-10-01-btn" type="button">新規</button>
          <button class="d08-10-01-btn" type="button">編集</button>
          <button class="d08-10-01-btn" type="button">共有</button>
          <button class="d08-10-01-btn" type="button">削除</button>
          <span class="d08-10-01-ring" aria-hidden="true"></span>
        </div>

.d08-10-01-group{position:relative;display:inline-flex;gap:8px;padding:6px;background:#f3f4f8;border-radius:14px}
        .d08-10-01-btn{position:relative;z-index:1;background:none;border:none;padding:10px 14px;font-size:13px;font-weight:600;color:#3a3d4a;border-radius:10px;cursor:pointer;outline:none;transition:color .2s}
        .d08-10-01-btn.is-active{color:#fff}
        .d08-10-01-ring{position:absolute;top:6px;left:6px;width:0;height:0;background:linear-gradient(135deg,#6a5cff,#8a7bff);border-radius:10px;box-shadow:0 4px 14px rgba(106,92,255,.35);transition:transform .28s cubic-bezier(.3,1,.4,1),width .28s,height .28s,opacity .2s;opacity:0;z-index:0;pointer-events:none}
        .d08-10-01-ring.is-show{opacity:1}

(function(){
        var group=document.querySelector('#item-08-10-01 .d08-10-01-group');if(!group)return;
        var ring=group.querySelector('.d08-10-01-ring');
        var btns=[].slice.call(group.querySelectorAll('.d08-10-01-btn'));
        function move(btn){
          ring.style.width=btn.offsetWidth+'px';
          ring.style.height=btn.offsetHeight+'px';
          ring.style.transform='translate('+btn.offsetLeft+'px,'+btn.offsetTop+'px)';
          ring.classList.add('is-show');
          btns.forEach(function(b){b.classList.toggle('is-active',b===btn);});
        }
        group.addEventListener('focusin',function(e){
          if(e.target.classList&&e.target.classList.contains('d08-10-01-btn'))move(e.target);
        });
        group.addEventListener('focusout',function(e){
          if(!group.contains(e.relatedTarget)){
            ring.classList.remove('is-show');
            btns.forEach(function(b){b.classList.remove('is-active');});
          }
        });
      })();