25+ CSS Ripple Effects

Last Updated on by in CSS Examples
Water Ripple Animation Ripples

If you are looking for a curated collection of CSS Ripple effects, you are in good place. In web design, CSS Ripple Effects provides interactive and captivating aspects to webpages providing an eye-catching user experience by simulating the concentric rings that form when a droplet falls into water.

We have handpicked ripple animation code and demo examples from various reliable sites including CodePen, GitHub and more.

CSS Ripple Effects have become a popular design trend for adding interactive and engaging elements to websites. With our best CSS Ripple effects creating a visually appealing animation becomes so much easy. The use of CSS Ripple Effects in web design can improve both the appearance and user experience.

Ripple effects offer a sense of relaxation while hovering over the web elements, and invoked on hover or active state. Our code examples are absolutely free and created using HTML and CSS 3 animation and transition properties. You can add ripple animation in simple text, images and buttons of your website, these Ripple animations also allow you to easily adjust the color, size, and animation speed for particular effect.

01. Hover Ripple

See the Pen
Hover Ripple
by magnificode (@magnificode)
on CodePen.

Author: magnificode @magnificode
Links: Source Code / Demo
Created on: June 27, 2016
Made with: HTML, CSS, SCSS

02. CSS Ripple Effect

See the Pen
CSS ripple effect
by Anthony DAlessio (@daless14)
on CodePen.

Author: Anthony DAlessio @daless14
Links: Source Code / Demo
Created on: July 21, 2013
Made with: HTML, CSS

03. Material Ripple Effect

See the Pen
Material Ripple effect
by Guillaume Schlipak (@Schlipak)
on CodePen.

Author: Guillaume Schlipak @Schlipak
Links: Source Code / Demo
Created on: April 06, 2015
Made with: HTML, CSS, JS

04. Ripple Button with Vue JS

See the Pen
Ripple button with VueJS
by Takane Ichinose (@takaneichinose)
on CodePen.

Author: Takane Ichinose @takaneichinose
Links: Source Code / Demo
Created on: January 26, 2019
Made with: HTML (Pug), CSS(SCSS), JS(Babel)

05. CSS Ripple Effect

See the Pen
Css Ripple effect
by SkillHub (@skillhubbd)
on CodePen.

Author: SkillHub @skillhubbd
Links: Source Code / Demo
Created on: September 18, 2021
Made with: HTML, CSS

06. Ripple Animation Button

See the Pen
Ripple Animation Button
by Chris Underdown (@chrisunderdown)
on CodePen.

Author: Chris Underdown @chrisunderdown
Links: Source Code / Demo
Created on: November 08, 2018
Made with: HTML, CSS, SCSS

07. CSS-only ripple toggle with dynamic text colour

See the Pen
CSS-only ripple toggle with dynamic text colour
by Liam (@liamj)
on CodePen.

Author: Liam @liamj
Links: Source Code / Demo
Created on: January 04, 2019
Made with: HTML, CSS, SCSS

08. Material Design Ripple Buttons With SVG Shapes

See the Pen
Material Design Ripple Buttons With SVG Shapes
by Brett Peters (@bap13)
on CodePen.


Author: Brett Peters @bap13
Links: Source Code / Demo
Created on: September 30, 2016
Made with: HTML, CSS, JS

09. Water Ripple Animation Ripples

Water Ripple Animation Ripples

Author: Ivan @Mactejo
Links: Source Code / Demo
Created on: December 22, 2019
Made with: HTML, CSS, JS

10. Logo with Ripple Effect

See the Pen
Logo with ripple effect
by Mikael Ainalem (@ainalem)
on CodePen.


Author: Mikael Ainalem @ainalem
Links: Source Code / Demo
Created on: February 21, 2019
Made with: HTML, CSS, JS

11. Button Ripple Effect

See the Pen
Button Ripple Effect
by Max Kurapov (@mkurapov)
on CodePen.

Author: Max Kurapov @mkurapov
Links: Source Code / Demo
Created on: September 18, 2018
Made with: HTML, CSS, SCSS

12. Material Design Ripple Effect with JavaScript

See the Pen
Material Design Ripple Effect with JavaScript
by Ayooluwa (@ayoisaiah)
on CodePen.

Author: Ayooluwa @ayoisaiah
Links: Source Code / Demo
Created on: March 30, 2017
Made with: HTML, CSS, JS

13. Pure CSS Card Ripple Effect

See the Pen
#25 – Pure CSS Card Ripple Effect
by Daiquiri.io (@daiquiri)
on CodePen.


Author: Daiquiri.io @daiquiri
Links: Source Code / Demo
Created on: January 22, 2018
Made with: HTML, CSS, SCSS

14. Material Design Ripple Effect using CSS and JS

See the Pen
Material Design Ripple Effect using CSS and JS
by Nitish Khagwal (@nitishkmrk)
on CodePen.

Author: Nitish Khagwal @nitishkmrk
Links: Source Code / Demo
Created on: August 17, 2018
Made with: HTML, CSS(Less)

15. Neumorphism – Ripple

See the Pen
004: Neumorphism – Ripple
by antwon (@antoniolee)
on CodePen.


Author: antwon @antoniolee
Links: Source Code / Demo
Created on: March 19, 2020
Made with: HTML, CSS, SCSS

16. Pure CSS Ripple Animation

See the Pen
Pure CSS Ripple Animation
by Leah Singh (@lrsingh)
on CodePen.


Author: Leah Singh @lrsingh
Links: Source Code / Demo
Created on: April 13, 2018
Made with: HTML, CSS(Less)

17. Toggle Button with Ripple

See the Pen
toggle button with ripple
by Irem Lopsum (@iremlopsum)
on CodePen.

Author: Irem Lopsum @iremlopsum
Links: Source Code / Demo
Created on: January 26, 2018
Made with: HTML, CSS, SCSS, JS(Babel)

18. Circular Ripple Hover Effect on Button

See the Pen
Circular Ripple Hover Effect on Button
by wifidev (@ViktorKorolyuk)
on CodePen.

Author: wifidev @ViktorKorolyuk
Links: Source Code / Demo
Created on: October 21, 2018
Made with: HTML, CSS, JS

19. Ripple Effect

See the Pen
Ripple effect
by Sabitha Kuppusamy (@sabitha_kuppusamy)
on CodePen.

Author: Sabitha Kuppusamy @sabitha_kuppusamy
Links: Source Code / Demo
Created on: June 05, 2019
Made with: HTML, CSS, JS

20. Navigation Bar Ripple Effects

See the Pen
Navigation Bar ripple effects
by Pranali (@pranali7)
on CodePen.

Author: Pranali @pranali7
Links: Source Code / Demo
Created on: May 01, 2016
Made with: HTML, CSS

21. Jquery Water Ripple Effect

See the Pen
Jquery Water Ripple Effect
by Divinector (@divinector)
on CodePen.

Author: Divinector @divinector
Links: Source Code / Demo
Created on: May 28, 2019
Made with: HTML, CSS, JS

22. Pure CSS Ripple Effect for Material Design

See the Pen
Pure CSS ripple effect for Material Design
by Bence Szabo (@finnhvman)
on CodePen.

Author: Bence Szabo @finnhvman
Links: Source Code / Demo
Created on: August 31, 2017
Made with: HTML, CSS

23. Ripple Animation on Input Type Radio and Checkbox

See the Pen
Ripple animation on input type radio and Checkbox
by WILDER TAYPE (@wtaype)
on CodePen.

Author: WILDER TAYPE @wtaype
Links: Source Code / Demo
Created on: December 27, 2016
Made with: HTML, CSS

24. A loader with Ripple Effect

See the Pen
A loader with ripple effect
by Egy Chandra (@ecl91)
on CodePen.

Author: Egy Chandra @ecl91
Links: Source Code / Demo
Created on: October 18, 2020
Made with: HTML, CSS

25. Ripple Effect with Only CSS

See the Pen
ripple effect with only css
by md aqil (@md-aqil)
on CodePen.


Author: md aqil @md-aqil
Links: Source Code / Demo
Created on: November 18, 2017
Made with: HTML, CSS

26. Bootstrap 4 Animated Buttons with Ripple Effect

See the Pen
Bootstrap 4 Animated Buttons with Ripple Effect
by Rüdiger Alte (@drralte)
on CodePen.

Author: Rüdiger Alte @drralte
Links: Source Code / Demo
Created on: January 08, 2019
Made with: HTML, CSS

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.