6 אפקטים לכפתורים באתר - חיים, ומהירים (בלי תוסף)

btn.onpointermove = e => {
  const r=btn.getBoundingClientRect();
  btn.style.transform=`translate(
    ${(e.clientX-r.left-r.width/2)*.4}px,
    ${(e.clientY-r.top-r.height/2)*.4}px)`; };

btn.onclick = e => {
  const s=document.createElement('span'); s.className='ripple';
  s.style.left=e.offsetX+'px'; s.style.top=e.offsetY+'px';
  btn.appendChild(s); setTimeout(()=>s.remove(), 600); };
/* .ripple { animation: ripple var(--dur,.6s); } */

.btn { position:relative; z-index:0; }
.btn::before { content:''; position:absolute; inset:0; z-index:-1;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur,.4s); }
.btn:hover::before { transform: scaleX(1); }

.btn::after { content:''; position:absolute; inset:0;
  border:2px solid var(--accent); clip-path: inset(0 0 0 100%);
  transition: clip-path var(--dur,.5s); }
.btn:hover::after { clip-path: inset(0); }

.btn { animation: pulse var(--dur,2s) ease-in-out infinite; }
@keyframes pulse { 50% {
  box-shadow: 0 0 0 4px rgba(59,217,255,.15),
              0 0 24px 2px rgba(59,217,255,.5); } }

.btn::before { content:''; position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 40%,
    rgba(255,255,255,.55) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: shine var(--dur,2.5s) linear infinite; }