Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

Last update: Dec 11, 2022

Related tags

Overview

Pure CSS ripple effect (no JavaScript)

CSS-only implementation of Android Material design "ripple" animation on click event

Main advantage of this solution is that there is no DOM manipulation in order to create animation. That means this is faster - it doesn't use JavaScript or jQuery to animate.

This solution is also implemented in one of the biggest Bootstrap theming libraries Bootswatch in their Materia theme.

Demo

Installation

This library can be installed via npm

npm install css-ripple-effect

Or you can use yarn

yarn add css-ripple-effect --production

Or you can use bower

bower install css-ripple-effect

Or you can simply download it in your project, but that way you don't have the option to update if newer versions appear.

Supporters

BrowserStack: Live, Web-Based Browser Testing https://browserstack.com

Comments

Click functionality breaks when used on button with font-awesome inside
May be this is not an issue and something out of my own error but i'm unable to figure it out and hence would like to seek your help for same.

When trying to implement the code in ripple.min.css on a button, following issues occur for reasons unknown to me:

Click stops working! This is the button code:

It blinks rather than 'ripple'

This is what '.customBtn ' looks like: .customBtn { position: fixed; top: 50%; font-size: 8em; background-color: transparent; color: grey; outline: 0; border: none; }

This is what i've copied in my CSS (SCSS) from your code: .ripple { position: relative; overflow: hidden;

&:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background-image: radial-gradient(circle, #000 10%, transparent 10.01%); background-repeat: no-repeat; background-position: 50%; transform: scale(10,10); opacity: 0; transition: transform .5s, opacity 1s; }

&:active, &:after { transform: scale(0,0); opacity: .2; transition: 0s; } }

What is wrong in this?
opened by tusharshuklaa 2
Doesn't work with Bootstrap v4 dropdown menu

Adding ripple to the dropdown link, makes the caret-down disappear and the ripple is not centred vertically.

https://jsfiddle.net/aq9Laaew/197449/

Chrome, Firefox and Edge 0n Windows...

opened by badamsdev 1
Changed animated property from "background-size" to "transform: scale()"

IE is not able to animate "background-size", so animation property is now "transform: scale()" which gives the same visual effect.

opened by mladenplavsic 0
effect is not showing on bootstrap anchor tag button?

Issue

first of thanks for this pure CSS ripple effect, but there is some problem with it when using anchor tag <a class="btn btn-primary" href="login.html">Login</a> as a button, and clicking on the button, page redirect to login page, and the ripple effect is not showing.

Suggestion

when we click on button first ripple effect should show and then page get redirect :)

Hope this helps :)

opened by ajaymarathe 0
Dark shadow

At github is a demonstration with white shadow which is just a picture . How can i get a white shadown (like on Bootswatch) instead of a gray shadow ?

opened by gtbu 0
causes horizontal overflow issues on inline elements

I had an issue where I used this on general elements with no additional styles. Since is natively inline, the .ripple:after pseudoelement would take its size from the nearest block level element, but anchor its central coordinates with the . This led to horizontal overflow issues where there otherwise were none.

opened by anEffingChamp 1

Right clicking triggers the ripple

Probably want to restrict the ripple effect to only left click actions. Triggering the ripple on right click is misleading.

Tested in Windows 10 Chrome Version 55.0.2883.87 m (64-bit)

opened by Arkh1 1

Releases(1.0.9)

1.0.9(Jan 7, 2018)

Source code(tar.gz)
Source code(zip)
1.0.6(Feb 22, 2017)

Source code(tar.gz)
Source code(zip)

Owner

Mladen Plavsic

GitHub http://mladenplavsic.github.io/css-ripple-effect

Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. This is a porting to Web Animation API of the fabulous animate.css project.

Animatelo Just-add-water Web Animations Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emp

477 Nov 12, 2022

100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API)

beez 100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API) The concept An Hive i

34 Dec 16, 2022

Pure CSS animated 3D Super Mario Icon

Pure CSS Super Mario This is the transferred source of a little sideproject I did in 2010. I initially did this without any CSS preprocessor and event

14 Apr 15, 2021

Pure CSS Image Hover Effect Library

imagehover.css A Scaleable & Light Image Hover CSS Library Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable

1.8k Dec 21, 2022

Pure css cross-browser loading animations.

[ArtWorx] xLoader Pure css cross-browser loading animations. xLoader is part of the ArtWorx collection. Most of the loaders made by community, You can

21 Nov 15, 2021

A JavaScript Typing Animation Library

Live Demo | View All Demos | View Full Docs | mattboldt.com Typed.js is a library that types. Enter in any string, and watch it type at the speed you'

12.6k Dec 31, 2022

React particles animation background component

particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com

561 Dec 24, 2022

A vue.js particles animation background component

particles-bg-vue A vue.js particles animation background component. Use it to make your website look cool. Check it out if you want to use it in React

206 Dec 24, 2022

image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.

Diaporama Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions

797 Nov 26, 2022

Demonstration of different animation effects with AngularJS ngView directive.

ngView-animation-effects This is a simple demonstration of how easy you can make your ngView directive transition pages with nice animations. All you

184 Dec 31, 2022

circle-svg-animation

Circle SVG Animation Plug css, js and just add short code in your html. Change the custom attribute data-percent and data-time for setting your percen

24 Aug 18, 2022

An experimental SVG letter animation inspired by the Dribbble shot ["Shading Letters in Illustrator"](https://dribbble.com/shots/2943049-Shading-Letters-in-Illustrator) by Jake Bartlett's. Powered by Julian Garnier's [anime.js](http://anime-js.com/).

Fancy SVG Letter Animation An experimental SVG letter animation inspired by the Dribbble shot "Shading Letters in Illustrator" by Jake Bartlett's. Pow

135 Dec 12, 2022

Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

Related tags

Overview

Pure CSS ripple effect (no JavaScript)

CSS-only implementation of Android Material design "ripple" animation on click event

Demo

Installation

Supporters

Comments

Click functionality breaks when used on button with font-awesome inside

Doesn't work with Bootstrap v4 dropdown menu

Changed animated property from "background-size" to "transform: scale()"

effect is not showing on bootstrap anchor tag button?

Issue

Suggestion

Hope this helps :)

Dark shadow

causes horizontal overflow issues on inline elements

Right clicking triggers the ripple

Releases(1.0.9)

1.0.9(Jan 7, 2018)

1.0.6(Feb 22, 2017)

Owner

Mladen Plavsic

Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. This is a porting to Web Animation API of the fabulous animate.css project.

100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API)

Pure CSS animated 3D Super Mario Icon

Pure CSS Image Hover Effect Library

Pure css cross-browser loading animations.

A JavaScript Typing Animation Library

React particles animation background component

A vue.js particles animation background component

image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.

Demonstration of different animation effects with AngularJS ngView directive.

circle-svg-animation

An experimental SVG letter animation inspired by the Dribbble shot ["Shading Letters in Illustrator"](https://dribbble.com/shots/2943049-Shading-Letters-in-Illustrator) by Jake Bartlett's. Powered by Julian Garnier's [anime.js](http://anime-js.com/).

Lazy Line Painter - A Modern JS library for SVG path animation

The Illusion of Life: An SVG Animation Case Study

This is a particle animation art piece using threejs.

Easy Effect is a WYSIWYG Lottie animation editor, dedicated to helping you make dynamic effects easily.

Cool tips to design UI/UX on Leaflet maps.

Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

.qube -- The Quintessential Responsive 3D CSS Cube