15+ CSS Ripple Effect Examples

[{"selector":"#anim-ef6ffb18-5e78-4d9d-aec5-395e69a61821 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(7.816569932165727%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"fill":"forwards"}] [{"selector":"#anim-520ed3bc-451a-450f-8a29-28dc6289a4f9","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b42a0a79-8b7d-488e-b77f-9f8cc399edbc","keyframes":{"transform":["translate3d(-115.45741%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Simple Water Drop ripple Effect

[{"selector":"#anim-89d12b89-53b4-4792-b225-2b49b5496315 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(7.8176489567817145%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"fill":"forwards"}] [{"selector":"#anim-5f28e27c-198f-477f-8446-b77c9d7911b7","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9908fe99-60f7-4b6b-8b81-42da4d23f378","keyframes":{"transform":["translate3d(0px, -190.68813%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Awesome Hover Ripple Effect

[{"selector":"#anim-24b73fcf-c91c-4734-9b19-eb721ac73ba4 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(7.816862914993096%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"fill":"forwards"}] [{"selector":"#anim-270e163f-f9fe-48e1-b3ce-10befbf82db3","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ce995a84-8cf4-4fe8-a1e1-eb65740b7a4e","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Button Ripple Effect On Click Using CSS

[{"selector":"#anim-2d95d4d9-5faf-4f6e-903c-fbb1ae71246f [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(7.8178204023829645%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"fill":"forwards"}] [{"selector":"#anim-0e6037b7-7cd1-409b-993e-0b3745babf3a","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] Learn more

15+ CSS Ripple Effect Examples

Simple Water Drop ripple Effect

#1

Awesome Hover Ripple Effect

#2

Button Ripple Effect On Click Using CSS

#3