Liquid Fill Button

<!--
  Author: @yokkcode
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<button class="liquid-btn">
  <span>Sign Up Free</span>
</button>

/*
 * Author: @yokkcode
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.liquid-btn {
  position: relative;
  overflow: hidden;
  padding: 15px 34px;
  border-radius: 12px;
  border: 2px solid #22d3ee;
  background: transparent;
  color: #22d3ee;
  font-family: system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  z-index: 0;
}
.liquid-btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  background: linear-gradient(180deg, #22d3ee, #0891b2);
  border-radius: 50% 50% 0 0 / 20% 20% 0 0;
  transition: height 0.55s cubic-bezier(0.65, 0, 0.35, 1), border-radius 0.55s ease;
  z-index: -1;
}
.liquid-btn:hover::before {
  height: 130%;
  border-radius: 0;
}
.liquid-btn:hover {
  color: #06181c;
}
.liquid-btn span {
  position: relative;
}