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

リップルボタン

クリックした位置から波紋が広がるマテリアル風の演出。WordPressの資料請求や申込みボタンに押した実感を与えます。

clickjs

プレビュー

ソースコード

HTML

<button type="button" class="d04-01-04-btn">資料ダウンロード</button>

CSS

.d04-01-04-btn{
          position:relative;
          padding:14px 44px;
          background:#2c7a5b;
          color:#fff;
          font-size:15px;
          font-weight:600;
          letter-spacing:.08em;
          border:none;
          border-radius:6px;
          cursor:pointer;
          overflow:hidden;
        }
        .d04-01-04-btn .d04-01-04-ripple{
          position:absolute;
          border-radius:50%;
          background:rgba(255,255,255,.45);
          transform:scale(0);
          animation:d04-01-04-ripple .6s ease-out forwards;
          pointer-events:none;
        }
        @keyframes d04-01-04-ripple{
          to{
            transform:scale(4);
            opacity:0;
          }
        }

JavaScript

(function(){
          var btn = document.querySelector('.d04-01-04 .d04-01-04-btn');
          if(!btn) return;
          btn.addEventListener('click', function(e){
            var rect = btn.getBoundingClientRect();
            var size = Math.max(rect.width, rect.height);
            var ripple = document.createElement('span');
            ripple.className = 'd04-01-04-ripple';
            ripple.style.width = ripple.style.height = size + 'px';
            ripple.style.left = (e.clientX - rect.left - size / 2) + 'px';
            ripple.style.top = (e.clientY - rect.top - size / 2) + 'px';
            btn.appendChild(ripple);
            setTimeout(function(){ ripple.remove(); }, 650);
          });
        })();

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