Bouton animé CSS avec effet d'ondulation

1,335 Primes

Ouvrir dans l'éditeur Publiez votre code

Bouton animé CSS avec effet d'ondulation

Recommandé

28 May 2026

Chargeur de jeu Unity WebGL avec intégration Firebase

23 April 2026

Exemple de menu HTML avec logo (français)

15 November 2025

Formulaire de transfert de pièces avec sélection de paiement

HTML

<!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>

CSS