パーツ番号 08-03-02 ・ JavaScript使用

マグネティックボタン

マウスが近づくとボタンが吸い寄せられるように移動し、離れると元へ戻ります。WordPressのヒーローCTAで目を引く演出に使えます。

プレビュー

ソースコード

HTML

<button class="d08-03-02-btn" type="button"><span class="d08-03-02-t">近づいてみて</span></button>

CSS

.d08-03-02{overflow:visible}
        .d08-03-02-btn{background:linear-gradient(135deg,#6a5cff,#a44bff);color:#fff;border:none;border-radius:14px;padding:16px 32px;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 10px 24px rgba(106,92,255,.3);transition:transform .18s ease-out}
        .d08-03-02-t{display:inline-block;transition:transform .18s ease-out;pointer-events:none}

JavaScript

(function(){
        var wrap=document.querySelector('#item-08-03-02 .d08-03-02');
        var btn=document.querySelector('#item-08-03-02 .d08-03-02-btn');
        var t=btn&&btn.querySelector('.d08-03-02-t');if(!wrap||!btn)return;
        var str=0.4;
        wrap.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,dy=e.clientY-cy;
          var dist=Math.hypot(dx,dy);
          if(dist<160){btn.style.transform='translate('+dx*str+'px,'+dy*str+'px)';t.style.transform='translate('+dx*str*0.4+'px,'+dy*str*0.4+'px)';}
          else{btn.style.transform='';t.style.transform='';}
        });
        wrap.addEventListener('mouseleave',function(){btn.style.transform='';t.style.transform='';});
      })();

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