波紋が広がるカード

<div class="d08-09-04-card" tabindex="0" role="button" aria-label="詳細を見る">
          <span class="d08-09-04-txt">タップして波紋</span>
        </div>

.d08-09-04-card{position:relative;overflow:hidden;width:100%;max-width:260px;height:150px;border-radius:16px;background:linear-gradient(135deg,#eef2ff,#dbe6ff);display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #dfe4f5}
        .d08-09-04-txt{font-size:14px;font-weight:700;color:#2a3a6b;z-index:2;pointer-events:none}
        .d08-09-04-ring{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(90,120,255,.35),rgba(90,120,255,0) 70%);transform:translate(-50%,-50%) scale(0);pointer-events:none;animation:d08-09-04-expand .7s ease-out forwards}
        @keyframes d08-09-04-expand{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

(function(){
        var card=document.querySelector('#item-08-09-04 .d08-09-04-card');if(!card)return;
        function ripple(x,y){
          var r=card.getBoundingClientRect();
          var size=Math.max(r.width,r.height)*1.8;
          var ring=document.createElement('span');ring.className='d08-09-04-ring';
          ring.style.width=size+'px';ring.style.height=size+'px';
          ring.style.left=x+'px';ring.style.top=y+'px';
          card.appendChild(ring);
          setTimeout(function(){ring.remove();},750);
        }
        card.addEventListener('click',function(e){
          var r=card.getBoundingClientRect();
          var x=(typeof e.clientX==='number'&&e.clientX?e.clientX:r.left+r.width/2)-r.left;
          var y=(typeof e.clientY==='number'&&e.clientY?e.clientY:r.top+r.height/2)-r.top;
          ripple(x,y);
        });
        card.addEventListener('keydown',function(e){
          if(e.key==='Enter'||e.key===' '){e.preventDefault();ripple(card.clientWidth/2,card.clientHeight/2);}
        });
      })();