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.
NEW
🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉
Click to visit: ApplyFox.ai
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
NEW
🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉
Click to visit: ApplyFox.ai
More Awesome Lists:
Share: