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

マグネット吸着ボタン

カーソルに引き寄せられるように少しだけ追従して動くボタン。WordPressのLPの目立たせたいCTAに、遊び心のあるインタラクションを加えられます。

プレビュー

ソースコード

HTML

<div class="d04-01-11-zone">
          <a href="#" class="d04-01-11-btn" onclick="return false;">お試しはこちら</a>
        </div>

CSS

.d04-01-11-zone{
          padding:40px;
          display:flex;
          align-items:center;
          justify-content:center;
        }
        .d04-01-11-btn{
          display:inline-block;
          padding:16px 46px;
          background:#111827;
          color:#fff;
          font-size:15px;
          font-weight:700;
          letter-spacing:.06em;
          text-decoration:none;
          border-radius:10px;
          box-shadow:0 6px 16px rgba(0,0,0,.2);
          transition:transform .15s ease-out;
        }

JavaScript

(function(){
        var zone=document.querySelector('.d04-01-11 .d04-01-11-zone');
        if(!zone)return;
        var btn=zone.querySelector('.d04-01-11-btn');
        zone.addEventListener('mousemove',function(e){
          var r=btn.getBoundingClientRect();
          var cx=r.left+r.width/2,cy=r.top+r.height/2;
          var dx=(e.clientX-cx)*0.35;
          var dy=(e.clientY-cy)*0.35;
          btn.style.transform='translate('+dx+'px,'+dy+'px)';
        });
        zone.addEventListener('mouseleave',function(){
          btn.style.transform='translate(0,0)';
        });
      })();

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