Bouton animé CSS avec effet d'ondulation

266 Primes

Ouvrir dans l'éditeur Publiez votre code

Bouton animé CSS avec effet d'ondulation

Recommandé

19 October 2025

Morphing de forme de particules Three.js avec contrôles

6 September 2025

Animation photo CSS Nostalgia Glitch

13 September 2025

Animation de la barre de chargement CSS HTML

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>

Recommandé

Morphing de forme de particules Three.js avec contrôles

Animation photo CSS Nostalgia Glitch

Animation de la barre de chargement CSS HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS