Liquid Bubble Button

.liquid-button {
  position: relative;
  padding: 16px 48px;
  font-size: 18px;
  font-weight: 700;
  color: white;
  background: transparent;
  border: none;
  cursor: pointer;
  overflow: hidden;
  filter: url(#goo);
}

.liquid-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: #3a7bff;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.liquid-button:hover::before {
  width: 300px;
  height: 300px;
}

.liquid-button span {
  position: relative;
  z-index: 1;
}

/* Animated bubbles */
.liquid-button::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  background: #3a7bff;
  border-radius: 50%;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  animation: bubble-rise 2s infinite;
}

@keyframes bubble-rise {
  0% {
    bottom: -15px;
    opacity: 0;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
  }
  100% {
    bottom: 100%;
    opacity: 0;
    transform: translateX(calc(-50% + 40px)) scale(0.5);
  }
}

/* SVG filter for goo effect */
.goo-filter {
  position: absolute;
  width: 0;
  height: 0;
}