A liquid-fill toggle button — instead of a plain on/off switch, selecting a state (like Sleep, Do Not Disturb, or Personal) fills the button with a smooth, wave-like liquid animation. It's a small interaction detail that makes a status-selector feel tactile instead of static.
| 😴 Sleep | 🔕 Do Not Disturb | 👤 Personal |
|---|---|---|
| Quiet hours state | Notification-free state | Custom/default state |
- 🌊 Liquid-fill wave animation on selection, not just a color swap
- 🖱️ Smooth transition between states — feels tactile, not robotic
- 🧩 Easy to adapt into any status/mode selector UI
- 🪶 Lightweight — no animation libraries, just CSS + JS
📸 This is the best kind of project for a GIF — the liquid fill motion is the whole point. Record the toggle switching between all 3 states and drop it in as
liquid-demo.gif.
git clone https://github.com/MALIK25252007/Liquid-button-Animation.git
cd Liquid-button-Animation
# open index.html in your browser
