Button Hiệu Ứng Chất Lỏng

<button class="liquid-button">
<span>Hover Me</span>
</button>

.liquid-button {
position: relative;
padding: 16px 40px;
color: #0ea5e9;
font-family: 'Inter', sans-serif;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
border: 2px solid #0ea5e9;
border-radius: 50px;
background: transparent;
cursor: pointer;
overflow: hidden;
transition: color 0.5s ease;
z-index: 1;
}

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

.liquid-button:hover {
color: #fff;
box-shadow: 0 0 20px rgba(14, 165, 233, 0.5);
}

.liquid-button::before,
.liquid-button::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 300px;
height: 300px;
border-radius: 45%;
transform: translate(-50%, 0) rotate(0deg);
z-index: -1;
transition: top 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.liquid-button::before {
background-color: rgba(14, 165, 233, 0.5);
}

.liquid-button::after {
background-color: rgba(14, 165, 233, 1);
}

.liquid-button:hover::before {
top: -80px;
animation: liquid-wave 3s linear infinite;
}

.liquid-button:hover::after {
top: -70px;
animation: liquid-wave 4s linear infinite;
}

@keyframes liquid-wave {
0% {
  transform: translate(-50%, 0) rotate(0deg);
}
100% {
  transform: translate(-50%, 0) rotate(360deg);
}
}