Ripple/Examples

This is a demo page for Ripple.
Button
Secondary
Text
Active
Full-width
A new morning
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in nisl sed quam convallis laoreet a mollis arcu. Sed molestie consequat libero vitae dictum.
Secondary
Primary
This card only has ripples in its buttons.
A new morning
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in nisl sed quam convallis laoreet a mollis arcu. Sed molestie consequat libero vitae dictum.
Secondary
Primary
This card has ripples in its buttons and its body (along with a hover indicator and cursor change in the body).
Unbounded ripple. This card's CSS:
#var-card-1 {
 --ripple-config__duration--ms: 6000;
 --ripple-config__max-radius--px: 300;
 --ripple-color: #3ea6ff;
}
Recentered ripple. This card's CSS:
#var-card-2 {
 --ripple-config__duration--ms: 600;
 --ripple-config__max-radius--px: 150;
 --ripple-config__min-duration--ms: 500;
 --ripple-color: #e91e63;
 --ripple-border-radius: 30%;
 --ripple-opacity: 40%;
}
Normal ripple. This card's CSS:
#var-card-3 {
 --ripple-config__end-duration--ms: 6000;
 --ripple-config__max-radius--px: 1000;
 --ripple-config__timing-function: ease;
 --ripple-color: #64dd17;
 --ripple-border-radius: 0;
 --ripple-opacity: 0.3;
}
Normal ripple. This card's CSS:
#var-card-4 {
 --ripple-config__duration--ms: 1500;
 --ripple-config__end-duration--ms: 1600;
 --ripple-config__max-radius--px: 50;
 --ripple-config__min-duration--ms: 1000;
 --ripple-config__timing-function: ease-out;
 --ripple-color: #d500f9;
 --ripple-border-radius: 50%;
 --ripple-opacity: .35;
}
Material Design ripple	Material Design ripple
Code 	Preview
<tabber>
HTML = 
Normal speed
1000% Slower	
Normal speed
1000% Slower	
Category:Demo pages