パーツ番号 06-04-11 ・ JavaScript使用

フォロー/フォロー中ボタン切替演出

クリックで「フォローする」から「フォロー中」へ形状と色がなめらかにモーフィングするボタン。会員サイトのユーザーフォロー機能に使えます。

clickjs

プレビュー

ソースコード

HTML

<div class="d06-04-11-wrap">
          <button class="d06-04-11-btn" type="button">
            <span class="d06-04-11-icon">+</span>
            <span class="d06-04-11-label">フォローする</span>
          </button>
        </div>

CSS

.d06-04-11-wrap { display:flex; align-items:center; justify-content:center; }
        .d06-04-11-btn { display:inline-flex; align-items:center; gap:6px; border:2px solid #3b82f6; background:#3b82f6; color:#fff; border-radius:999px; padding:9px 20px; font-size:13px; font-weight:700; cursor:pointer; transition:background .3s ease, color .3s ease, border-color .3s ease; }
        .d06-04-11-icon { display:inline-flex; transition:transform .3s ease; }
        .d06-04-11-btn.is-following { background:#fff; color:#3b82f6; }
        .d06-04-11-btn.is-following .d06-04-11-icon { transform:rotate(45deg); }

JavaScript

(function(){
          var article = document.currentScript.closest('article');
          var root = article.querySelector('.d06-04-11');
          var btn = root.querySelector('.d06-04-11-btn');
          var label = root.querySelector('.d06-04-11-label');
          var following = false;
          btn.addEventListener('click', function(){
            following = !following;
            btn.classList.toggle('is-following', following);
            label.textContent = following ? 'フォロー中' : 'フォローする';
          });
        })();

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