Create Material Design ripple effect in your HTML without using a single line of JS.
Create Material Design ripple effect in your HTML without using a single line of JavaScript code.
Here it is!
Fun isn't it?
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
.Read this article I wrote to incorporate this in your project file.