Bouton animé CSS avec effet d'ondulation

961 Primes

Ouvrir dans l'éditeur Publiez votre code

Bouton animé CSS avec effet d'ondulation

Recommandé

11 October 2025

Extrait d'animation de chargement CSS

27 September 2025

Animation de chargement CSS : flux de mémoire et réflexion

26 August 2024

Icônes sociales avec reflets

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