리퀴드 버튼

<svg width="0" height="0"><defs><filter id="goo1"><feGaussianBlur in="SourceGraphic" stdDeviation="7" result="b"/><feColorMatrix in="b" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 24 -11"/></filter></defs></svg>
<div class="stage">
  <div class="goo" id="goo">
    <i class="pill"></i>
    <i class="bub b1"></i><i class="bub b2"></i><i class="bub b3"></i>
  </div>
  <span class="label">Hover me</span>
</div>

.stage{position:relative;width:100%;height:100%}
.goo{position:absolute;inset:0;filter:url(#goo1)}
.pill{position:absolute;left:50%;bottom:24%;transform:translateX(-50%);width:clamp(96px,32vmin,150px);height:clamp(32px,11vmin,44px);
  border-radius:999px;background:var(--accent)}
.bub{position:absolute;left:50%;bottom:24%;width:16px;height:16px;border-radius:50%;background:var(--accent);animation:rise 2.6s ease-in infinite}
.b2{left:44%;animation-delay:.6s;width:12px;height:12px}
.b3{left:58%;animation-delay:1.2s;width:14px;height:14px}
@keyframes rise{
  0%{transform:translate(-50%,0) scale(.3);opacity:0}
  25%{opacity:1}
  75%{transform:translate(-50%,-64px) scale(1);opacity:1}
  100%{transform:translate(-50%,-84px) scale(0);opacity:0}
}
.label{position:absolute;left:50%;bottom:24%;transform:translateX(-50%);width:clamp(96px,32vmin,150px);height:clamp(32px,11vmin,44px);
  display:grid;place-items:center;color:#fff;font:700 13px/1 sans-serif;pointer-events:none}