Ripple-without-JS
Create Material Design ripple effect in your HTML without using a single line of JavaScript code.
https://kvaibhav01.github.io/Ripple-without-JS/
LIVE DEMO: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 toflex
to make it of same length regardless of the content. -
Ripple:
transform
property set totranslate3d
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 theradial-gradient
function which takes in acircle
as itsshape
,#fff
or white as thestart-color
andlast-color
astransparent 10.01%
.transition
is used along withtransform
with its corresponding timing andopacity
.
That's it! Simple, clean and Materialistic!
Codeburst publication on Medium.
I've written a supporting blog post onYou can read the complete post and hit a clap or two here!