パーツ番号 06-14-08 ・ JavaScript使用

フローティング縦並びシェアボタン

画面端に縦に並ぶシェアボタン群。ホバーで軽く浮き上がり、クリックすると選択状態が一瞬強調表示される。記事ページの追従シェアバーとして使える構成です。

hoverclickjs

プレビュー

ソースコード

HTML

<div class="d06-14-08-wrap">
          <div class="d06-14-08-float">
            <button class="d06-14-08-ic" type="button" style="--c:#1d9bf0" aria-label="X">X</button>
            <button class="d06-14-08-ic" type="button" style="--c:#1877f2" aria-label="Facebook">f</button>
            <button class="d06-14-08-ic" type="button" style="--c:#25d366" aria-label="LINE">L</button>
          </div>
          <p class="d06-14-08-note">クリックでシェア(スクロール追従イメージ)</p>
        </div>

CSS

.d06-14-08-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; }
        .d06-14-08-float { display:flex; flex-direction:column; gap:8px; background:#fff; border:1px solid #eef0f3; border-radius:12px; padding:8px; box-shadow:0 4px 14px rgba(0,0,0,.08); }
        .d06-14-08-ic { width:30px; height:30px; border-radius:50%; border:none; background:var(--c); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; }
        .d06-14-08-ic:hover { transform:translateX(4px); }
        .d06-14-08-ic.is-picked { box-shadow:0 0 0 3px rgba(0,0,0,.15); }
        .d06-14-08-note { font-size:10.5px; color:#9ca3af; text-align:center; }

JavaScript

(function(){
          var root = document.querySelector('.d06-14-08');
          var icons = root.querySelectorAll('.d06-14-08-ic');
          icons.forEach(function(ic){
            ic.addEventListener('click', function(){
              ic.classList.remove('is-picked');
              void ic.offsetWidth;
              ic.classList.add('is-picked');
              setTimeout(function(){ ic.classList.remove('is-picked'); }, 600);
            });
          });
        })();

クラス名 .d06-14-08 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。