Pulsante animato CSS con effetto a catena

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

23 August 2025

Esempio di animazione della griglia CSS

13 June 2025

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Button</title>
  <style>
    *{margin:0;padding:0;box-sizing:border-box}
    body{height:100vh;display:flex;justify-content:center;align-items:center;background:#0a0a0a;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
    .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 36px;font-size:1.1rem;font-weight:600;color:#fff;background:transparent;border:2px solid #333;border-radius:16px;cursor:pointer;overflow:hidden;transition:all .4s cubic-bezier(.2,.8,.2,1)}
    .btn svg{width:20px;height:20px;transition:transform .4s ease}
    .btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,#333,transparent);transition:all .6s ease}
    .btn:hover{transform:translateY(-4px);border-color:#fff;box-shadow:0 20px 40px rgba(0,0,0,.3)}
    .btn:hover::before{left:100%}
    .btn:hover svg{transform:translateX(6px)}
    .btn:active{transform:translateY(-1px)}
    .wave{position:absolute;border-radius:50%;background:rgba(255,255,255,.15);transform:scale(0);animation:wave .7s ease-out forwards;pointer-events:none}
    @keyframes wave{to{transform:scale(3.5);opacity:0}}
  </style>
</head>
<body>
  <button class="btn" id="btn">
    CLICK ME
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 12h14M12 5l7 7-7 7"/>
    </svg>
  </button>
  <script>
    const btn=document.getElementById('btn');
    btn.addEventListener('click',e=>{
      const rect=btn.getBoundingClientRect();
      const size=Math.max(rect.width,rect.height)*1.2;
      const x=e.clientX-rect.left-size/2;
      const y=e.clientY-rect.top-size/2;
      const wave=document.createElement('span');
      wave.classList.add('wave');
      wave.style.width=wave.style.height=size+'px';
      wave.style.left=x+'px';
      wave.style.top=y+'px';
      btn.appendChild(wave);
      setTimeout(()=>wave.remove(),700);
    });
  </script>
</body>
</html>

Pulsante animato CSS con effetto a catena

Consigliato

Esempio di animazione della griglia CSS

Carte adesive impilate

Caricatore luminoso

HTML

CSS

JS

Consigliato

Esempio di animazione della griglia CSS

Carte adesive impilate

Caricatore luminoso

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS