Liquid Button with CSS Hover Animation

Buttons are a fundamental part of web design, and they come in various styles and shapes. In this tutorial, we will explore how to create a visually appealing liquid button using HTML and CSS. A liquid button is a button with a unique animation that makes it look like it’s made of liquid or water, adding an eye-catching element to your website.

So, let’s dive in and learn how to make one step by step!

Step 1: HTML Structure for a Liquid Button

This HTML code represents a button with a text label (“Button”) and a div element with the class “liquid” inside an anchor tag, potentially used for creating a liquid animation effect when hovered.

<a href="#">
<div class="liquid"></div>

 Step 2: Liquid Button with Hover Animation in CSS

This CSS code defines the styles for a liquid button with a captivating hover animation effect. It includes properties for button appearance, liquid animation, and the transformation on hover.

* {
margin: 0;
padding: 0;
box-sizing: border-box;

body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #754b59c4;

a {
position: relative;
padding: 20px 50px;
display: block;
text-decoration: none;
text-transform: uppercase;
width: 200px;
overflow: hidden;
border-radius: 40px;

a span {
position: relative;
color: #fff;
fot-size: 20px;
font-family: Arial;
letter-spacing: 8px;
z-index: 1;

a .liquid {
position: absolute;
top: -80px;
left: 0;
width: 200px;
height: 200px;
background: #81a49a5e;
box-shadow: inset 0 0 50px rgba(0, 0, 0, .5);
transition: .5s;

a .liquid::after,
a .liquid::before {
content: '';
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -75%);
background: #754b59c4;

a .liquid::before {

border-radius: 45%;
background: #754b59c4;
animation: animate 5s linear infinite;

a .liquid::after {

border-radius: 40%;
background: rgba(20, 20, 20, .5);
animation: animate 10s linear infinite;

a:hover .liquid{
top: -120px;

@keyframes animate {
0% {
transform: translate(-50%, -75%) rotate(0deg);
100% {
transform: translate(-50%, -75%) rotate(360deg);

Liquid Button with CSS Hover Animation Demo

In this tutorial, we’ve created a stylish liquid button using HTML and CSS. You can further customize the button by adjusting the colors, sizes, and animation parameters to match your website’s design. Liquid buttons can add a modern and eye-catching element to your web projects, making user interactions more engaging

You Might Be Interested In:

Ashfaq Ahmed is a freelance WordPress developer and owner of I developed modern and highly interactive websites. I always focus on improving my development and design skills.

Leave a Comment