Getting Started
Jose Tamu
Sep 22, 2025 /
Beginner /
CSS only

Ripple Button v3

Top Ripple
Top Ripple
Bottom Ripple
Bottom Ripple

Content tab

Animation group

From: determines where the text will come from: top or bottom. Just like the demos.
Durations: they are splitted in 2 durations: for Translate and Ripple animations.
Delays: they are splitted in 2 delays: for Translate and Ripple animations.
CSS easings: they are splitted in 2 easings: for Translate and Ripple animations. You can set any custom CSS easing of your own. Learn more about CSS easings here.