klaudiusmiskinis/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Testing de Ripple</title>
    <link href="src/styles.css" />
    <meta charset="UTF-8" />
  </head>

  <body>
    <div>
      <button class="btn btn-color">Ejemplo</button>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

## ripple.css
/* Estilos generales para el botón */
.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

/* Estilos para el botón con color */
.btn-color {
  margin: 0.3rem;
  color: #fff;
  background-color: #1900ff;
  border-color: transparent;
}

/* Estilos para el botón con color cuando el cursor está sobre él */
.btn-color:hover {
  color: #fff;
  background-color: #0a0063;
  border-color: transparent;
}

/* Estilo de la etiqueta <span="ripple"> */
span.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 600ms linear;
  background-color: rgba(255, 255, 255, 0.7);
  overflow: hidden;
}

/* Se utiliza una animación con keyframes para aumentar el tamaño del elemento y hacer que desaparezca gradualmente. */
@keyframes ripple {
  to {
    transform: scale(2);
    opacity: 0;
  }
}

## ripple.js
/* Este código JavaScript crea un efecto de ondulación (ripple) cuando se hace clic en los botones de una página web.
La primera línea declara una variable buttons y selecciona todos los elementos que son botones de la página web usando el método getElementsByTagName.
const buttons = document.getElementsByTagName("button"); */

/* Luego, el bucle for...of itera sobre cada botón seleccionado y le agrega un evento click que llama a la función createRipple. */
for (const button of buttons) {
  button.addEventListener("click", createRipple);
}

/* La función createRipple se ejecuta cuando se hace clic en un botón y toma el evento como su argumento.
Dentro de la función, se crea un nuevo elemento span que será la onda que se muestra en el efecto. */
function createRipple(event) {
  const button = event.currentTarget;
  const circle = document.createElement("span");
  const diameter = Math.max(button.clientWidth, button.clientHeight);
  const radius = diameter / 2;

  /* A continuación, se establece la posición del círculo en función de la posición del clic del usuario en relación con el botón. */
  circle.style.width = circle.style.height = ${diameter}px;
  circle.style.left = ${event.clientX - button.offsetLeft - radius}px;
  circle.style.top = ${event.clientY - button.offsetTop - radius}px;
  circle.classList.add("ripple");

  /* Se elimina cualquier círculo anterior que pudiera existir en el botón, para asegurarse de que solo se muestre una onda a la vez. */
  const ripple = button.getElementsByClassName("ripple")[0];
  if (ripple) {
    ripple.remove();
  }

  /* Finalmente, se agrega el círculo al botón como un hijo. */
  button.appendChild(circle);
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Testing de Ripple</title>
	<link href="src/styles.css" />
	<meta charset="UTF-8" />
	</head>

	<body>
	<div>
	<button class="btn btn-color">Ejemplo</button>
	</div>
	<script src="src/index.js"></script>
	</body>
	</html>
	/* Estilos generales para el botón */
	.btn {
	display: inline-block;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	border: 1px solid transparent;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
	}

	/* Estilos para el botón con color */
	.btn-color {
	margin: 0.3rem;
	color: #fff;
	background-color: #1900ff;
	border-color: transparent;
	}

	/* Estilos para el botón con color cuando el cursor está sobre él */
	.btn-color:hover {
	color: #fff;
	background-color: #0a0063;
	border-color: transparent;
	}

	/* Estilo de la etiqueta <span="ripple"> */
	span.ripple {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	animation: ripple 600ms linear;
	background-color: rgba(255, 255, 255, 0.7);
	overflow: hidden;
	}

	/* Se utiliza una animación con keyframes para aumentar el tamaño del elemento y hacer que desaparezca gradualmente. */
	@keyframes ripple {
	to {
	transform: scale(2);
	opacity: 0;
	}
	}
	/* Este código JavaScript crea un efecto de ondulación (ripple) cuando se hace clic en los botones de una página web.
	La primera línea declara una variable buttons y selecciona todos los elementos que son botones de la página web usando el método getElementsByTagName.
	const buttons = document.getElementsByTagName("button"); */

	/* Luego, el bucle for...of itera sobre cada botón seleccionado y le agrega un evento click que llama a la función createRipple. */
	for (const button of buttons) {
	button.addEventListener("click", createRipple);
	}

	/* La función createRipple se ejecuta cuando se hace clic en un botón y toma el evento como su argumento.
	Dentro de la función, se crea un nuevo elemento span que será la onda que se muestra en el efecto. */
	function createRipple(event) {
	const button = event.currentTarget;
	const circle = document.createElement("span");
	const diameter = Math.max(button.clientWidth, button.clientHeight);
	const radius = diameter / 2;

	/* A continuación, se establece la posición del círculo en función de la posición del clic del usuario en relación con el botón. */
	circle.style.width = circle.style.height = ${diameter}px;
	circle.style.left = ${event.clientX - button.offsetLeft - radius}px;
	circle.style.top = ${event.clientY - button.offsetTop - radius}px;
	circle.classList.add("ripple");

	/* Se elimina cualquier círculo anterior que pudiera existir en el botón, para asegurarse de que solo se muestre una onda a la vez. */
	const ripple = button.getElementsByClassName("ripple")[0];
	if (ripple) {
	ripple.remove();
	}

	/* Finalmente, se agrega el círculo al botón como un hijo. */
	button.appendChild(circle);
	}