ホバーで色づくSNSボタン群

<div class="d06-14-04-wrap">
          <button class="d06-14-04-ic" type="button" style="--c:#1d9bf0" aria-label="X">
            <svg viewBox="0 0 24 24" width="18" height="18"><path d="M18.9 3H21l-6.7 7.7L22 21h-6.3l-4.9-6.4L5 21H2.9l7.1-8.2L3 3h6.4l4.4 5.9L18.9 3z"/></svg>
          </button>
          <button class="d06-14-04-ic" type="button" style="--c:#1877f2" aria-label="Facebook">
            <svg viewBox="0 0 24 24" width="18" height="18"><path d="M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.4h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12z"/></svg>
          </button>
          <button class="d06-14-04-ic" type="button" style="--c:#25d366" aria-label="LINE">
            <svg viewBox="0 0 24 24" width="18" height="18"><path d="M12 2C6.5 2 2 5.8 2 10.4c0 2.9 1.9 5.5 4.8 7-.2.7-.7 2.5-.8 2.9 0 0-.1.4.2.6.3.1.6 0 .6 0 .8-.1 3-2 3.5-2.4.6.1 1.2.1 1.8.1 5.5 0 10-3.8 10-8.5S17.5 2 12 2z"/></svg>
          </button>
        </div>
        <p class="d06-14-04-msg"></p>

.d06-14-04-wrap { display:flex; gap:10px; }
        .d06-14-04-ic { width:38px; height:38px; border-radius:50%; border:1px solid #e5e7eb; background:#fff; color:#9ca3af; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease; }
        .d06-14-04-ic svg { fill:currentColor; }
        .d06-14-04-ic:hover { background:var(--c); color:#fff; border-color:var(--c); transform:translateY(-3px); }
        .d06-14-04-msg { margin:10px 0 0; font-size:11px; font-weight:700; color:#6b7280; min-height:14px; text-align:center; }

(function(){
          var root = document.querySelector('.d06-14-04');
          var icons = root.querySelectorAll('.d06-14-04-ic');
          var msg = root.querySelector('.d06-14-04-msg');
          var timer = null;
          icons.forEach(function(ic){
            ic.addEventListener('click', function(){
              var name = ic.getAttribute('aria-label');
              msg.textContent = name + 'でシェアしました';
              clearTimeout(timer);
              timer = setTimeout(function(){ msg.textContent = ''; }, 1800);
            });
          });
        })();