Liquid Fill Button

<button class="liquid-btn">Explore</button>

.liquid-btn {
  position: relative;
  padding: 12px 32px;
  background: transparent;
  color: #1a1a1a;
  border: 1.5px solid #1a1a1a;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: color .4s ease;
  z-index: 0;
}
.liquid-btn::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 0;
  background: #1a1a1a;
  transition: height .4s cubic-bezier(.4,0,.2,1);
  z-index: -1;
}
.liquid-btn:hover { color: #fff; }
.liquid-btn:hover::before { height: 100%; }