Liquid button hover animation | HTML, CSS & JavaScript

/* General reset & centering for preview */
body {
  background: #0d0d13;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: 'Arial', sans-serif;
}

/* Button Wrapper & Filter Application */
.liquid-button {
  position: relative;
  padding: 18px 45px;
  background-color: #ff007f; /* Base liquid color */
  color: #fff;
  border: none;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.3s;
  
  /* Apply the SVG liquid filter here */
  filter: url('#liquid-goo');
}

/* Keep the text crisp and on top of the liquid effect */
.btn-text {
  position: relative;
  z-index: 10;
}

/* Base styling for the liquid blobs */
.blob {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  background: #ff007f;
  border-radius: 50%;
  transform: translateY(-50%) scale(0);
  transition: transform 0.6s ease;
  z-index: 1;
}

/* Distribute blobs along the button coordinates */
.blob:nth-child(2) { left: 10%; transition-delay: 0s; }
.blob:nth-child(3) { left: 35%; transition-delay: 0.1s; }
.blob:nth-child(4) { left: 60%; transition-delay: 0.05s; }
.blob:nth-child(5) { left: 85%; transition-delay: 0.15s; }

/* --- Hover States --- */

/* Expand the blobs smoothly on hover so they merge into a single liquid wave */
.liquid-button:hover .blob {
  transform: translateY(-50%) scale(3.5);
}

/* Optional: Slight color shift on hover */
.liquid-button:hover {
  background-color: #ff3399;
}
.liquid-button:hover .blob {
  background-color: #ff3399;
}

- Liquid button hover animation

Live Preview