Liquid Fill
Progressive fill like a rising liquid.
The code
A glimpse of the source:
style.css
.demo-btn {
padding: 16px 32px;
font-size: 1rem;
font-weight: 600;
border-width: medium;
border-style: none;
border-color: currentcolor;
border-image: initial;
border-radius: 12px;
cursor: pointer;
🔒 Unlock the full code
Full HTML + CSS + JS, copy-paste-ready — with 800 more Premium effects.
Concrete use cases
A few real contexts where Liquid Fill shines:
- An app download button
- The primary action of a contact form
- The main button of a sales page
How it works
Pure CSS effect — no JavaScript dependency.
Make it yours
You can tweak:
- the colors, size and timing straight in the CSS
Add it in 3 steps
- Paste the HTML where you want the effect on your page.
- Add the CSS to your stylesheet (or in a <style> tag).
- Tweak the colors and CSS variables to match your brand — nothing to install.
Browser support
Works in every modern browser (Chrome, Firefox, Safari, Edge). Responsive, with graceful degradation.
More Buttons effects
Browse all Buttons effects →FAQ
Is the code free?
This effect is part of the Premium library (801 effects, copy-paste-ready code). Around 70 effects are free.
How do I add it to my project?
Copy the HTML, CSS and JS and paste them in. No dependencies, works with any framework.
Does it work on mobile?
Yes — the effects are responsive and degrade gracefully.