Dynamic Button Ripple Effect Exercise

[00:00:00]
>> Here I've already applied the JavaScript code that we've seen. So it already sets mouse local x and mouse local y and we are using them here to create a gradient that is centered in the place where I've clicked. I'm using the active pseudo class so I can see the gradient when my mouse pointer is down and it disappears when my mouse pointer is up.

[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.

[00:01:31]
So how can we do that with the same amount of JavaScript and basically just with CSS and the same JavaScript that we already have.