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

Ripple Button v2

Top Ripple
Top Ripple
Top Ripple
Top Ripple
Bottom Ripple
Bottom Ripple
Bottom Ripple
Bottom Ripple

Content tab

Animation group

From: determines where the text will come from: top or bottom. Just like the demos.
Scale: determines the scale to apply on hover.
Translate & rotate: both controls will determine the intensity of the text animation.
Durations: they are splitted in 3 durations: for Scale, Translate and Rotate animations.
Delays: they are splitted in 3 delays: for Scale, Translate and Rotate animations.
CSS easings: they are splitted in 3 easings: for Scale, Translate and Rotate animations. You can set any custom CSS easing of your own. Learn more about CSS easings here.