パーツ番号 08-14-01 ・ JavaScript使用

吸い寄せられるマグネットボタン

カーソルが近づくとボタン全体が引力で吸い寄せられ、離れると静かに元へ戻ります。WordPressのヒーローCTAボタンで注目を集める演出に使えます。

プレビュー

ソースコード

HTML

<button class="d08-14-01-btn" type="button">MAGNET</button>

CSS

.d08-14-01-btn{background:linear-gradient(135deg,#ff6a88,#ff9a6a);color:#fff;border:none;border-radius:12px;padding:14px 30px;font-size:14px;font-weight:700;letter-spacing:.05em;cursor:pointer;box-shadow:0 10px 22px rgba(255,106,136,.35);transition:transform .2s ease-out}

JavaScript

(function(){
        var wrap=document.querySelector('#item-08-14-01 .d08-14-01');
        var btn=document.querySelector('#item-08-14-01 .d08-14-01-btn');if(!wrap||!btn)return;
        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);
          var radius=130;
          if(dist<radius){
            var p=(1-dist/radius)*0.55;
            btn.style.transform='translate('+(dx*p)+'px,'+(dy*p)+'px)';
          }else{
            btn.style.transform='';
          }
        });
        wrap.addEventListener('mouseleave',function(){btn.style.transform='';});
      })();

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