25+ Amazing CSS Ripple Effects (Free Code + Examples)
Enjoy this 100% free and open source collection of HTML and CSS ripple effect code examples. These pure CSS ripple effects will add some flair to your project.
1. CSS Ripple Animation Button
Author: Chris Underdown (chrisunderdown)
Links: Source Code / Demo
Created on: November 8, 2018
Made with: HTML, SCSS
2. Toggle Button With Ripple
Author: Irem Lopsum (iremlopsum)
Links: Source Code / Demo, Dribbble Shot
Created on: January 26, 2018
Made with: HTML, SCSS, Babel
Tags: toggle, switch, ripple, motion, interaction
3. Material Design Ripple Effect Using CSS And JS
Material Design inspired Ripple Ink effect using CSS and JavaScript.
Author: Nitish Khagwal (nitishkmrk)
Links: Source Code / Demo
Created on: August 17, 2018
Made with: HTML, Less, JS
Tags: ripple, wave, animation, material design, animated
4. Ripple Button With VueJS
Just a simple retro'ish ripple button with few Javascript (VueJS) codes for events and some sort of controls.
Author: Takane Ichinose (takaneichinose)
Links: Source Code / Demo
Created on: January 26, 2019
Made with: Pug, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: codepenchallenge, cpc-pop, animation, button, vue
5. CSS Logo With Ripple Effect
Using clip-paths makes it possible to have the Material UI ripple effect on irregular shapes. Bear Logo by Yoga Perdana from dribbble
Author: Mikael Ainalem (ainalem)
Links: Source Code / Demo
Created on: February 20, 2019
Made with: HTML, CSS, JS
Tags: material ui, ripple, bear, logo, shapes
6. Circular Ripple Hover Effect On Button
Author: ViktorKorolyuk (ViktorKorolyuk)
Links: Source Code / Demo
Created on: October 20, 2018
Made with: HTML, CSS, JS
Tags: css, simple, button, ui, animation
7. CSS-only Ripple Toggle With Dynamic Text Colour
A CSS-only toggle button with dynamic inverse text colour.
Author: Liam (liamj)
Links: Source Code / Demo
Created on: January 3, 2019
Made with: HTML, SCSS, JS
Tags: animation, form, checkbox, toggle, radial
8. CSS Ripples
This is a cool little mixin I made in SCSS for button animations. Hover over the buttons to see the magic! I hope you like it and I hope it comes in handy for you!
Author: Jack Thomson (Jackthomsonn)
Links: Source Code / Demo
Created on: November 1, 2016
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
9. CSS-only Ripple Toggle With Dynamic Text Colour
A CSS-only toggle button with dynamic inverse text colour.
Author: Liam (liamj)
Links: Source Code / Demo
Created on: January 3, 2019
Made with: HTML, SCSS, JS
Tags: animation, form, checkbox, toggle, radial
10. CSS Hover Ripple (Ripple Effect On Hover)
Little hover ripple effect. Icon: https://thenounproject.com/search/?q=devil+horns&i=342612
Author: magnificode (magnificode)
Links: Source Code / Demo, Thenounproject.com
Created on: June 27, 2016
Made with: HTML, SCSS
Tags: ripple, hover
11. Pure CSS Ripple Effect For Material Design
A CSS only implementation for ripple effect without using pseudo elements. Read more: https://codepen.io/finnhvman/post/pure-css-ripple-with-minimal-effort The ripple effect consists of two parts: one is a circle increasing in diameter, and the other is the fade out of the highlight color...Read More
Author: Ben Szabo (finnhvman)
Links: Source Code / Demo
Created on: August 31, 2017
Made with: HTML, CSS, JS
Tags: material, material design, ripple, button, pure-css
12. CSS Ripple Effect
Using pseudo elements and animation to create a ripple effect.
Author: Chris Smith (chris22smith)
Links: Source Code / Demo
Created on: April 25, 2019
Made with: HTML, CSS
13. Button Ripple Effect
Simple pulsating, ripple effect with box shadow.
Author: Max Kurapov (mkurapov)
Links: Source Code / Demo
Created on: September 17, 2016
Made with: HTML, SCSS
Tags: ripple, pulse, pulsating, button, pulsing
14. Pure CSS Ripple Effect
Pure CSS ripple effect. Button ripples when clicked to mimic water droplet.
Author: James (jamesharmer)
Links: Source Code / Demo
Created on: September 4, 2019
Made with: HTML, SCSS
Tags: ripple, css-button, button, hover-effect, button hover
15. Pure CSS Ripple Animation
Author: Leah Singh (lrsingh)
Links: Source Code / Demo
Created on: April 13, 2018
Made with: HTML, Less
16. Button Ripple Effect On Click Using Pure CSS
Author: Prasad D. (prasad-d)
Links: Source Code / Demo
Created on: May 17, 2019
Made with: HTML, SCSS
Tags: ripple effect, button, animation, css, transition
17. #25 - Pure CSS Card Ripple Effect
Simple responsive toggable cards with the "ripple" effect.
Author: Daiquiri.io (daiquiri)
Links: Source Code / Demo
Created on: January 21, 2018
Made with: HTML, SCSS
Tags: ripple, card, mobile-ui, toggle, options
18. Material Design Checkbox Animation (Pure CSS + Ripple Effect)
Author: le hollandais volant (lehollandaisvolant)
Links: Source Code / Demo
Created on: July 1, 2016
Made with: HTML, CSS, JS
19. Jquery Water Ripple Effect
Author: Divinector (divinector)
Links: Source Code / Demo
Created on: May 28, 2019
Made with: HTML, CSS, JS
20. Water-Ripple-Animation-ripples
Author: Ivan (Mactejo)
Links: Source Code / Demo
Created on: December 22, 2019
Made with: HTML, CSS, JS
Tags: water-ripple-animation-ripples, water animation
More Awesome Lists:
Share: