Ripple Effect for a Link Using CSS

A ripple effect makes a link visually appealing by creating an expanding wave animation when clicked.

We can achieve this effect using CSS animations combined with the ::after pseudo-element. Below is a basic example of a ripple effect for a link:

</>
Copy
/* Ripple effect */
a.ripple {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: white;
  background-color: #007BFF;
  padding: 15px 20px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 5px;
  overflow: hidden;
}

a.ripple::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

a.ripple:active::after {
  transform: scale(4);
  opacity: 0;
}

Examples

Example 1. Simple Ripple Effect on a Link

In this example, the link button creates a ripple effect when clicked.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    a.ripple {
      display: inline-block;
      position: relative;
      text-decoration: none;
      color: white;
      background-color: #007BFF;
      padding: 15px 20px;
      font-size: 18px;
      font-weight: bold;
      border-radius: 5px;
      overflow: hidden;
    }

    a.ripple::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(0);
      opacity: 1;
      transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    }

    a.ripple:active::after {
      transform: translate(-50%, -50%) scale(4);
      opacity: 0;
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com" class="ripple">Click Me</a></p>
</body>
</html>

Output:

Example 2. Dynamic Ripple Effect Using JavaScript

In this example, we enhance the ripple effect by dynamically positioning the ripple where the user clicks.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    a.dynamic-ripple {
      display: inline-block;
      position: relative;
      text-decoration: none;
      color: white;
      background-color: #28a745;
      padding: 15px 20px;
      font-size: 18px;
      font-weight: bold;
      border-radius: 5px;
      overflow: hidden;
    }

    .ripple-effect {
      position: absolute;
      width: 100px;
      height: 100px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      transform: scale(0);
      opacity: 1;
      animation: rippleAnimation 0.6s linear;
    }

    @keyframes rippleAnimation {
      from {
        transform: scale(0);
        opacity: 1;
      }
      to {
        transform: scale(4);
        opacity: 0;
      }
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com" class="dynamic-ripple">Click Me</a></p>

  <script>
    document.querySelector(".dynamic-ripple").addEventListener("click", function(event) {
      let ripple = document.createElement("span");
      ripple.classList.add("ripple-effect");
      this.appendChild(ripple);

      let rect = this.getBoundingClientRect();
      let x = event.clientX - rect.left;
      let y = event.clientY - rect.top;

      ripple.style.left = `${x}px`;
      ripple.style.top = `${y}px`;

      setTimeout(() => {
        ripple.remove();
      }, 600);
    });
  </script>
</body>
</html>

Conclusion

Using the ::after pseudo-element, you can create a simple ripple effect with CSS. For a more interactive experience, JavaScript can dynamically position the ripple effect based on the user’s click location.