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

マテリアル風リップルボタン

クリックした指の位置から波紋が広がって消えます。WordPressの送信・購入ボタンに乗せるとクリックの手応えが伝わります。

clickjsinput

プレビュー

ソースコード

HTML

<button class="d08-09-01-btn" type="button">送信する</button>

CSS

.d08-09-01-btn{position:relative;overflow:hidden;background:#2a2d3a;color:#fff;border:none;border-radius:10px;padding:14px 32px;font-size:15px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
        .d08-09-01-btn:hover{background:#3b3f52}
        .d08-09-01-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);pointer-events:none;animation:d08-09-01-spread .6s ease-out forwards}
        @keyframes d08-09-01-spread{to{transform:scale(1);opacity:0}}

JavaScript

(function(){
        var btn=document.querySelector('#item-08-09-01 .d08-09-01-btn');if(!btn)return;
        btn.addEventListener('click',function(e){
          var r=btn.getBoundingClientRect();
          var size=Math.max(r.width,r.height)*2;
          var span=document.createElement('span');
          span.className='d08-09-01-ripple';
          var x=(typeof e.clientX==='number'&&e.clientX?e.clientX:r.left+r.width/2)-r.left-size/2;
          var y=(typeof e.clientY==='number'&&e.clientY?e.clientY:r.top+r.height/2)-r.top-size/2;
          span.style.width=size+'px';span.style.height=size+'px';
          span.style.left=x+'px';span.style.top=y+'px';
          btn.appendChild(span);
          setTimeout(function(){span.remove();},650);
        });
      })();

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