Kvaibhav01/Ripple-without-JS

Create Material Design ripple effect in your HTML without using a single line of JS.

Ripple-without-JS

Create Material Design ripple effect in your HTML without using a single line of JavaScript code.

LIVE DEMO: https://kvaibhav01.github.io/Ripple-without-JS/

What's the output?

Here it is!

Fun isn't it?

How to achieve?

If there's no JS, then there's CSS. To achive the task we need to make a new CSS file having:

• Container: display property set to flex to make it of same length regardless of the content.

• Ripple: transform property set to translate3d to define a 3D translation.

• Ripple-after: this is where the ripple effect ends. We can show something like a text but it doesn't make sense here. Therefore the content has been set to "".

  • background-image's value has been set to the radial-gradient function which takes in a circle as its shape, #fff or white as the start-color and last-color as transparent 10.01%.
  • transition is used along with transform with its corresponding timing and opacity.

That's it! Simple, clean and Materialistic!

Read this article I wrote to incorporate this in your project file.