Ripple Effect

jitesh208
Jan 17, 2026 2
Live Preview

Live Editor

<main class="container">
  <a href="javascript:void(0)" class="btn">
    <span>Explore</span>
  </a>
</main>
*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Courier New", Courier, monospace;
}

html {
  font-size: 62.5%;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: #262626;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  position: absolute;
  width: 18rem;
  height: 18rem;
  background-color: #9b0e0e;
  border-radius: 50%;
  border: 0.2rem dotted #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.btn span {
  position: relative;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
}

.ripple {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #e7be08;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: rippleAnim 0.7s forwards;
}

@keyframes rippleAnim {
  0% {
    width: 0;
    height: 0;
  }
  100% {
    width: 220%;
    height: 220%;
  }
}
const btn = document.querySelector(".btn");

let rippleDiv;

btn.addEventListener("mouseenter", (e) => {
  //get the coordinates of the cursor
  const left = e.clientX - e.target.getBoundingClientRect().left;
  const top = e.clientY - e.target.getBoundingClientRect().top;

  rippleDiv = document.createElement("div");
  rippleDiv.classList.add("ripple");
  rippleDiv.style.left = `${left}px`;
  rippleDiv.style.top = `${top}px`;

  btn.prepend(rippleDiv);
});

btn.addEventListener("mouseleave", () => {
  btn.removeChild(rippleDiv);
});
Categories

Ripple Effect

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
