パーツ番号 08-09-08 ・ JavaScript使用

クリック波及トグルスイッチ

クリックするとつまみの位置から色の波が広がり、トラック全体の色が切り替わります。WordPressの設定パネルのON/OFFスイッチに使えます。

clickjs

プレビュー

ソースコード

HTML

<button class="d08-09-08-toggle" type="button" role="switch" aria-checked="false" aria-label="通知を有効にする">
          <span class="d08-09-08-wave"></span>
          <span class="d08-09-08-knob"></span>
        </button>

CSS

.d08-09-08-toggle{position:relative;width:74px;height:36px;border-radius:18px;background:#e2e4ea;border:none;cursor:pointer;overflow:hidden;padding:0;transition:background .35s}
        .d08-09-08-wave{position:absolute;top:50%;left:5px;width:26px;height:26px;border-radius:50%;background:#22c55e;transform:translateY(-50%) scale(0);opacity:.55;pointer-events:none}
        .d08-09-08-toggle.is-anim .d08-09-08-wave{animation:d08-09-08-wave .5s ease-out}
        @keyframes d08-09-08-wave{0%{transform:translateY(-50%) scale(0);opacity:.6}100%{transform:translateY(-50%) scale(6);opacity:0}}
        .d08-09-08-knob{position:absolute;top:3px;left:3px;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .35s cubic-bezier(.6,0,.2,1),background .35s}
        .d08-09-08-toggle.is-on{background:#bdf0cf}
        .d08-09-08-toggle.is-on .d08-09-08-knob{transform:translateX(38px);background:#22c55e}

JavaScript

(function(){
        var t=document.querySelector('#item-08-09-08 .d08-09-08-toggle');if(!t)return;
        t.addEventListener('click',function(){
          var on=t.classList.toggle('is-on');
          t.setAttribute('aria-checked',on?'true':'false');
          t.classList.remove('is-anim');void t.offsetWidth;t.classList.add('is-anim');
        });
      })();

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