/Ripple-without-JS

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

Primary LanguageCSSThe UnlicenseUnlicense

Ripple-without-JS

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

forthebadge forthebadge

What's the output?

Here it is!

Ripple demo

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.