Ripple Button v2

Top Ripple

Bottom Ripple

How it works

Ripple Button v2 has 2 available types: top or bottom. Both of them are showcased at the demos.
The button admits different titles at top and bottom states. The longest title will determine button dimensions.

Scale Animation controls

Scale: determines the scale to apply on hover. The demo uses 1.1
Duration
Delay
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Translate Animation controls

Duration
Delay
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Text Rotate Animation controls

Text rotate & Text translate: both controls will determine the intensity of the text animation. The demo uses 90deg and 15px respectively.
Duration
Delay
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

– Tamu