Jose Tamu
January 10, 2025 /
Beginner

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.

Style tab

There are several groups available to style Ripple Button v3: Margin, Padding, Borders and Typography. Backgrounds and texts colors of both the button and the mask have to be set at the Button Colors and Mask Colors groups. If you need to apply additional styles, you can do so at the Settings Tab.