パーツ番号 10-03-11 ・ JavaScript使用

いいね数カウントアップボタン

ハートをクリックするたびに数値が弾みながら増減し、色がピンクに変化します。WordPressの投稿・コメントの「いいね」ボタンに使えます。

chatclickjs

プレビュー

ソースコード

HTML

<button class="d10-03-11-like" type="button" aria-pressed="false">
          <svg viewBox="0 0 24 24" width="22" height="22" class="d10-03-11-heart"><path d="M12 21s-7-4.6-9.3-8.4C1 9.3 2.7 6 6 6c2 0 3.2 1.2 4 2.3C10.8 7.2 12 6 14 6c3.3 0 5 3.3 3.3 6.6C19 16.4 12 21 12 21z"/></svg>
          <span class="d10-03-11-cnt">128</span>
        </button>

CSS

.d10-03-11-like{display:inline-flex;align-items:center;gap:8px;border:1.5px solid #e6e9ef;border-radius:22px;background:#fff;padding:8px 16px;cursor:pointer;transition:border-color .2s,background .2s}
        .d10-03-11-heart{fill:#c3cbe0;transition:fill .2s,transform .3s}
        .d10-03-11-like.on{border-color:#ffb3c6;background:#fff5f8}
        .d10-03-11-like.on .d10-03-11-heart{fill:#ff5c8a;animation:d1555beat .45s ease}
        @keyframes d1555beat{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}
        .d10-03-11-cnt{font-size:13px;font-weight:700;color:#3a4152}
        .d10-03-11-like.on .d10-03-11-cnt{color:#ff5c8a}

JavaScript

(function(){
        var root=document.getElementById('item-10-03-11');if(!root)return;
        var btn=root.querySelector('.d10-03-11-like'),cnt=root.querySelector('.d10-03-11-cnt');
        var base=128,on=false;
        btn.addEventListener('click',function(){
          on=!on;btn.classList.toggle('on',on);btn.setAttribute('aria-pressed',on);
          cnt.textContent=on?base+1:base;
        });
      })();

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