├── .gitignore ├── LICENSE.md ├── README.md ├── VERSION ├── bower.json ├── dist ├── ripple.css └── ripple.min.css ├── docs ├── images │ ├── example-css-ripple-effect.gif │ └── logo_browserstack.svg ├── index.html └── ripple.min.css ├── gulpfile.js ├── package.json └── src └── ripple.less /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/* -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Mladen Plavsic 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Pure CSS ripple effect (no JavaScript) 2 | 3 | ## CSS-only implementation of Android Material design "ripple" animation on click event 4 | 5 | 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. 6 | 7 | This solution is also implemented in one of the biggest Bootstrap theming libraries [Bootswatch](https://bootswatch.com/) in their [Materia theme](https://bootswatch.com/materia/#buttons). 8 | 9 | Demo 10 | ==== 11 | 12 | ![CSS ripple effect example](https://github.com/mladenplavsic/css-ripple-effect/raw/master/docs/images/example-css-ripple-effect.gif "CSS ripple effect example") 13 | 14 | * [Demo](https://mladenplavsic.github.io/css-ripple-effect/) 15 | * [Bootswatch Materia theme demo](https://bootswatch.com/materia/#buttons) 16 | * [Bootswatch Paper (Bootstrap v3) theme demo](https://bootswatch.com/3/paper/#buttons) 17 | 18 | 19 | Installation 20 | ============ 21 | 22 | This library can be installed via `npm` 23 | ``` 24 | npm install css-ripple-effect 25 | ``` 26 | Or you can use `yarn` 27 | ``` 28 | yarn add css-ripple-effect --production 29 | ``` 30 | Or you can use `bower` 31 | ``` 32 | bower install css-ripple-effect 33 | ``` 34 | 35 | 36 | Or you can simply download it in your project, but that way you don't have the option to update if newer versions appear. 37 | 38 | Supporters 39 | ========== 40 | 41 | - **BrowserStack**: Live, Web-Based Browser Testing https://browserstack.com 42 | -------------------------------------------------------------------------------- /VERSION: -------------------------------------------------------------------------------- 1 | 1.0.8 -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-ripple-effect", 3 | "description": "Pure CSS implementation of Android Material design \"ripple\" animation on click event", 4 | "main": "src/ripple.less", 5 | "authors": [ 6 | "Mladen Plavsic " 7 | ], 8 | "license": "MIT", 9 | "keywords": [ 10 | "material", 11 | "ripple", 12 | "circle", 13 | "effect", 14 | "click", 15 | "animation" 16 | ], 17 | "homepage": "https://github.com/mladenplavsic/css-ripple-effect", 18 | "ignore": [ 19 | "**/.*", 20 | "node_modules", 21 | "bower_components", 22 | "test", 23 | "tests" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /dist/ripple.css: -------------------------------------------------------------------------------- 1 | .ripple { 2 | position: relative; 3 | overflow: hidden; 4 | transform: translate3d(0, 0, 0); 5 | } 6 | .ripple:after { 7 | content: ""; 8 | display: block; 9 | position: absolute; 10 | width: 100%; 11 | height: 100%; 12 | top: 0; 13 | left: 0; 14 | pointer-events: none; 15 | background-image: radial-gradient(circle, #000 10%, transparent 10.01%); 16 | background-repeat: no-repeat; 17 | background-position: 50%; 18 | transform: scale(10, 10); 19 | opacity: 0; 20 | transition: transform .5s, opacity 1s; 21 | } 22 | .ripple:active:after { 23 | transform: scale(0, 0); 24 | opacity: .2; 25 | transition: 0s; 26 | } 27 | -------------------------------------------------------------------------------- /dist/ripple.min.css: -------------------------------------------------------------------------------- 1 | .ripple{position:relative;overflow:hidden;transform:translate3d(0,0,0)}.ripple: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}.ripple:active:after{transform:scale(0,0);opacity:.2;transition:0s} -------------------------------------------------------------------------------- /docs/images/example-css-ripple-effect.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mladenplavsic/css-ripple-effect/1afb34bc615ea1bc6b63bae18b45baee581a346e/docs/images/example-css-ripple-effect.gif -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | Pure CSS ripple effect (no JavaScript) 9 | 11 | 12 | 13 | 14 | 16 | 17 | 18 | 20 | 22 | 23 | 28 | 29 | 30 |
31 | 32 |
33 |

Pure CSS ripple effect (no JavaScript)

34 |

CSS-only implementation of Android Material design "ripple" animation

35 |

36 | Star 41 | Fork 45 | Follow @mladenplavsic 47 |

48 |
49 | 50 | 51 |
52 |

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

54 |

55 | Demo 56 |

57 |

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

60 |

61 | More examples 62 |

63 | 64 |
65 |

Add to your project

66 |

Install

67 |

Use any of the methods below

68 |

npm install css-ripple-effect

69 |

yarn add css-ripple-effect --production

70 |

bower install css-ripple-effect

71 | 72 |

Or simply include stylesheet into your HTML file

73 |

<link rel="stylesheet" href="bower_components/css-ripple-effect/dist/ripple.min.css">

74 | 75 |

Add CSS class

76 |

To enable this feature just include CSS file and put "ripple" class on HTML element. The only problem is 77 | that it doesn't follow mouse location because it is not possible via CSS, so it always starts somewhere 78 | at the center of the element.

79 |

<a class="ripple">Link</a>

80 |
81 | 82 |
83 |

Examples

84 | 85 |

86 | Default 87 | Primary 88 | Success 89 | Info 90 | Warning 91 | Danger 92 | Link 93 |

94 |

95 | Default 96 | Primary 97 | Success 98 | Info 99 | Warning 100 | Danger 101 | Link 102 |

103 | 104 |
105 |
106 |
107 | Default 108 | 110 | 117 |
118 | 119 |
120 | Primary 121 | 123 | 130 |
131 | 132 |
133 | Success 134 | 136 | 143 |
144 | 145 |
146 | Info 147 | 149 | 156 |
157 | 158 |
159 | Warning 160 | 162 | 169 |
170 |
171 |
172 | 173 |

174 | Large button 175 | Default button 176 | Small button 177 | Mini button 178 |

179 | 180 |

181 | Block level button 182 |

183 | 184 |
185 |
186 | Left 187 | Middle 188 | Right 189 |
190 |
191 | 192 |
193 |
194 |
195 | 1 196 | 2 197 | 3 198 | 4 199 |
200 | 201 |
202 | 5 203 | 6 204 | 7 205 |
206 | 207 |
208 | 8 209 |
210 | 211 | Dropdown 212 | 213 | 214 | 219 |
220 |
221 |
222 |
223 | 224 |
225 |
226 | Button 227 | Button 228 | Button 229 | Button 230 |
231 |
232 |
233 | 234 |

Examples on Bootswatch website

235 | 236 | 241 | 242 |

Supporters

243 | 244 |

245 | 246 | BrowserStack 247 | 248 |

249 |

Live, Web-Based Browser Testing

250 |

251 | 252 | 253 | 254 |

255 |
256 | 257 | 258 |
259 |

260 | CSS ripple effect maintained by mladenplavsic 261 |

262 |
263 |
264 | 265 | 281 | 282 | 283 | 284 | -------------------------------------------------------------------------------- /docs/ripple.min.css: -------------------------------------------------------------------------------- 1 | .ripple{position:relative;overflow:hidden;transform:translate3d(0,0,0)}.ripple: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}.ripple:active:after{transform:scale(0,0);opacity:.2;transition:0s} -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var less = require('gulp-less'); 3 | var cleanCSS = require('gulp-clean-css'); 4 | var rename = require('gulp-rename'); 5 | 6 | gulp.task('default', [ 7 | 'docs' 8 | ]); 9 | 10 | gulp.task('less', function () { 11 | return gulp.src('./src/ripple.less') 12 | .pipe(less()) 13 | .pipe(gulp.dest('dist')) 14 | .pipe(cleanCSS()) 15 | .pipe(rename({suffix: '.min'})) 16 | .pipe(gulp.dest('dist')); 17 | }); 18 | 19 | gulp.task('docs', ['less'], function () { 20 | return gulp.src([ 21 | './dist/*.min.css' 22 | ]) 23 | .pipe(gulp.dest('docs')) 24 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-ripple-effect", 3 | "description": "Pure CSS implementation of Android Material design \"ripple\" animation on click event", 4 | "version": "1.0.8", 5 | "main": "src/ripple.less", 6 | "devDependencies": { 7 | "gulp": "^3.9.1", 8 | "gulp-clean-css": "^2.0.13", 9 | "gulp-less": "^3.3.0", 10 | "gulp-rename": "^1.2.2" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/mladenplavsic/css-ripple-effect.git" 15 | }, 16 | "keywords": [ 17 | "material", 18 | "ripple", 19 | "circle", 20 | "effect", 21 | "click", 22 | "animation" 23 | ], 24 | "author": "Mladen Plavsic ", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/mladenplavsic/css-ripple-effect/issues" 28 | }, 29 | "homepage": "http://mladenplavsic.github.io/css-ripple-effect/" 30 | } 31 | -------------------------------------------------------------------------------- /src/ripple.less: -------------------------------------------------------------------------------- 1 | .ripple { 2 | position: relative; 3 | overflow: hidden; 4 | transform: translate3d(0, 0, 0); 5 | 6 | &:after { 7 | content: ""; 8 | display: block; 9 | position: absolute; 10 | width: 100%; 11 | height: 100%; 12 | top: 0; 13 | left: 0; 14 | pointer-events: none; 15 | background-image: radial-gradient(circle, #000 10%, transparent 10.01%); 16 | background-repeat: no-repeat; 17 | background-position: 50%; 18 | transform: scale(10,10); 19 | opacity: 0; 20 | transition: transform .5s, opacity 1s; 21 | } 22 | 23 | &:active:after { 24 | transform: scale(0,0); 25 | opacity: .2; 26 | transition: 0s; 27 | } 28 | } --------------------------------------------------------------------------------