Botón animado CSS con efecto de onda

Abrir en el editor Publica tu código

Recomendado

27 June 2025

Burbujas de hojas de sprites de lienzo

25 July 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>

Botón animado CSS con efecto de onda

Recomendado

Un código de Mete

Burbujas de hojas de sprites de lienzo

El safari de microinteracción

HTML

CSS

JS

Recomendado

Un código de Mete

Burbujas de hojas de sprites de lienzo

El safari de microinteracción

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS