リアクション絵文字ピッカー演出

<div class="d06-04-05-wrap">
          <button class="d06-04-05-emoji" type="button" data-e="👍">👍</button>
          <button class="d06-04-05-emoji" type="button" data-e="❤️">❤️</button>
          <button class="d06-04-05-emoji" type="button" data-e="😂">😂</button>
          <button class="d06-04-05-emoji" type="button" data-e="😮">😮</button>
          <button class="d06-04-05-emoji" type="button" data-e="😢">😢</button>
        </div>
        <span class="d06-04-05-selected"></span>

.d06-04-05 { flex-direction:column; gap:10px; }
        .d06-04-05-wrap { display:flex; gap:6px; }
        .d06-04-05-emoji { border:1px solid #e5e7eb; background:#fff; border-radius:999px; width:36px; height:36px; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .2s, opacity .2s; }
        .d06-04-05-wrap.d06-04-05-picked .d06-04-05-emoji:not(.d06-04-05-active) { opacity:.4; }
        .d06-04-05-emoji.d06-04-05-active { border-color:#3b82f6; animation:d535pop .35s ease; }
        @keyframes d535pop { 0%{transform:scale(1);} 50%{transform:scale(1.4);} 100%{transform:scale(1.1);} }
        .d06-04-05-selected { font-size:12px; color:#6b7280; min-height:16px; }

(function(){
          var article = document.currentScript.closest('article');
          var root = article.querySelector('.d06-04-05');
          var wrap = root.querySelector('.d06-04-05-wrap');
          var buttons = root.querySelectorAll('.d06-04-05-emoji');
          var selected = root.querySelector('.d06-04-05-selected');
          buttons.forEach(function(b){
            b.addEventListener('click', function(){
              buttons.forEach(function(x){ x.classList.remove('d06-04-05-active'); });
              b.classList.add('d06-04-05-active');
              wrap.classList.add('d06-04-05-picked');
              selected.textContent = b.getAttribute('data-e') + ' を選択しました';
            });
          });
        })();