Botón con Efecto Ripple
Categoría: Botones
Botón con efecto de onda al hacer clic
Vista Previa:
📚 Explicación del Efecto:
El efecto ripple se crea dinámicamente con JavaScript, generando un elemento que se expande desde el punto de clic.
Código Exportable
CSS
HTML
JavaScript
.btn-ripple {
position: relative;
overflow: hidden;
background: #667eea;
color: white;
border: none;
padding: 12px 24px;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
transition: background 0.3s;
}
.btn-ripple:hover {
background: #5a67d8;
}
.ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.7);
transform: scale(0);
animation: ripple-animation 0.6s linear;
}
@keyframes ripple-animation {
to {
transform: scale(4);
opacity: 0;
}
}<button class="btn-ripple" onclick="createRipple(event)">
Botón Ripple
<span class="ripple"></span>
</button>
function createRipple(event) {
const button = event.currentTarget;
const circle = document.createElement("span");
const diameter = Math.max(button.clientWidth, button.clientHeight);
const radius = diameter / 2;
circle.style.width = circle.style.height = `${diameter}px`;
circle.style.left = `${event.clientX - button.getBoundingClientRect().left - radius}px`;
circle.style.top = `${event.clientY - button.getBoundingClientRect().top - radius}px`;
circle.classList.add("ripple");
const ripple = button.getElementsByClassName("ripple")[0];
if (ripple) ripple.remove();
button.appendChild(circle);
}