Dynamic CSS with Custom Properties (aka CSS Variables) Dynamic Button Ripple Effect Exercise
Transcript from the "Dynamic Button Ripple Effect Exercise" Lesson
[00:00:23] So we can use this code as a starting point to create a ripple like that of material design. First let's transform this gradient to show an actual circle. Right now we just have a gradient from a semi-transparent white to completely transparent. Let's use the same trick that we've seen numerous times in this workshop where we use Color Stop at zero to create hardlines and now we already have a circle.
[00:00:57] So what is the material design ripple? In material design, it's actually very fast. We're gonna make an effect that's much slower but it's basically this circle that starts from where the mouse pointer went down, and then simultaneously it's a positive fades and it's radius grows. So it looks like this ripple that just grows and disappears.