← 動的パーツギャラリーへ戻る

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

フォローボタン切替

「フォロー」⇔「フォロー中」をクリックで切替、色が反転する（クリック動作あり）。WordPressの会員登録やお気に入り登録ボタンに。

chatclickjs

プレビュー

ソースコード

HTML

<div class="d10-03-07-card">
          <span class="d10-03-07-av">A</span>
          <div class="d10-03-07-info">
            <p class="d10-03-07-name">Aoi Design</p>
            <p class="d10-03-07-sub">@aoi_design</p>
          </div>
          <button class="d10-03-07-btn" id="d10-03-07-btn">フォロー</button>
        </div>

CSS

.d10-03-07 .d10-03-07-card{width:240px;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #e6e9ef;border-radius:14px;font-size:12px}
        .d10-03-07 .d10-03-07-av{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;background:linear-gradient(135deg,#6a8bff,#8a6cff)}
        .d10-03-07 .d10-03-07-info{flex:1;min-width:0}
        .d10-03-07 .d10-03-07-name{font-weight:700;color:#333}
        .d10-03-07 .d10-03-07-sub{color:#9aa4b2;font-size:11px}
        .d10-03-07 .d10-03-07-btn{flex:0 0 auto;border:1.5px solid #6a8bff;border-radius:16px;padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer;background:#6a8bff;color:#fff;transition:.2s}
        .d10-03-07 .d10-03-07-btn.d10-03-07-following{background:#fff;color:#6a8bff}
        .d10-03-07 .d10-03-07-btn:hover{opacity:.88}

JavaScript

(function(){
        var btn=document.getElementById('d10-03-07-btn'),on=false;
        btn.addEventListener('click',function(){
          on=!on;btn.classList.toggle('d10-03-07-following',on);btn.textContent=on?'フォロー中':'フォロー';
        });
      })();

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