Awesome Open Source
Awesome Open Source


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.

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Js (1,154,706
Html (275,063
Css (161,735
Button (18,669
Material (15,813
Material Design (4,757
Css Animations (735
Css Selector (447
Hacktoberfest2018 (166
Button Animation (76
Ripple Effect (39
Ripplebutton (5