Liquid Wave Button — CSS Animation with Source Code

The Liquid Wave Button is a creative and playful call-to-action component where the button appears to be a container partially filled with liquid. On hover, the liquid “rises” to fill the button, complete with a realistic, oscillating wave motion. This effect adds a tactile, physical feel to digital interactions.

How It Works

The magic of the wave motion is achieved using a clever CSS trick: a large square with heavily rounded, slightly asymmetric corners (border-radius: 40%). This square is placed inside the button (which has overflow: hidden) and is positioned above the “liquid” container. When this square rotates continuously using an @keyframes animation, its rounded edges create the illusion of a moving liquid surface as they pass through the button’s visible area. On :hover, the entire liquid container (the .waves div) is transitioned from top: 100% to top: 0.

Use Cases

• Creative “Submit” or “Sign Up” buttons
• Progress indicators (where the fill level matches completion percentage)
• Themed brand elements for beverages, fluid-handling software, or casual apps
• Interactive highlights in a gamified UI

How to Customize

• Change Liquid Color: Modify the background of the .waves class.
• Adjust Wave Speed: Change the animation-duration of the wave-rot keyframes.
• Control Wave “Choppiness”: Adjust the border-radius of the ::before and ::after elements. A lower percentage (e.g., 30%) will create deeper, more aggressive waves.
• Add Transparency: Add a box-shadow to the button or make the liquid semi-transparent using rgba() to show content behind the wave.

Frequently Asked Questions

Why use two pseudo-elements (::before and ::after)?

Using two rotating squares with different rotation speeds and opacities creates a “parallax wave” effect. This adds depth, making the liquid look like it has a foreground and background layer, rather than being a single flat shape.

Is this accessible?

Yes. The text inside the button is wrapped in a <span> with a higher z-index, ensuring it stays readable and visible as the liquid rises. We also transition the text color on hover to maintain contrast against the filling liquid.

Can I make the wave vertical?

The current implementation moves the “fill” from bottom to top. You can easily change this to side-to-side by modifying the left or right properties and adjusting the rotation container’s dimensions.