{"id":13536627,"url":"https://github.com/mladenplavsic/css-ripple-effect","last_synced_at":"2025-04-04T11:15:41.041Z","repository":{"id":25617160,"uuid":"29052352","full_name":"mladenplavsic/css-ripple-effect","owner":"mladenplavsic","description":"Pure CSS (no JavaScript) implementation of Android Material design \"ripple\" animation","archived":false,"fork":false,"pushed_at":"2019-04-15T21:29:49.000Z","size":1229,"stargazers_count":341,"open_issues_count":6,"forks_count":110,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-10-11T04:43:14.390Z","etag":null,"topics":["no-javascript","pure-css","ripple"],"latest_commit_sha":null,"homepage":"http://mladenplavsic.github.io/css-ripple-effect","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mladenplavsic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-01-10T09:00:47.000Z","updated_at":"2024-10-06T02:23:10.000Z","dependencies_parsed_at":"2022-08-24T14:09:40.300Z","dependency_job_id":null,"html_url":"https://github.com/mladenplavsic/css-ripple-effect","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mladenplavsic%2Fcss-ripple-effect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mladenplavsic%2Fcss-ripple-effect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mladenplavsic%2Fcss-ripple-effect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mladenplavsic%2Fcss-ripple-effect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mladenplavsic","download_url":"https://codeload.github.com/mladenplavsic/css-ripple-effect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247166169,"owners_count":20894654,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["no-javascript","pure-css","ripple"],"created_at":"2024-08-01T09:00:45.755Z","updated_at":"2025-04-04T11:15:41.017Z","avatar_url":"https://github.com/mladenplavsic.png","language":"CSS","funding_links":[],"categories":["CSS","CSS and JS","🚀 A series of exquisite and compact web page cool effects","Uncategorized"],"sub_categories":["Components","Button Effect","Uncategorized"],"readme":"# Pure CSS ripple effect (no JavaScript)\n\n## CSS-only implementation of Android Material design \"ripple\" animation on click event\n\nMain 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.\n\nThis 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).\n\nDemo\n====\n\n![CSS ripple effect example](https://github.com/mladenplavsic/css-ripple-effect/raw/master/docs/images/example-css-ripple-effect.gif \"CSS ripple effect example\")\n\n* [Demo](https://mladenplavsic.github.io/css-ripple-effect/)\n* [Bootswatch Materia theme demo](https://bootswatch.com/materia/#buttons)\n* [Bootswatch Paper (Bootstrap v3) theme demo](https://bootswatch.com/3/paper/#buttons)\n\n\nInstallation\n============\n\nThis library can be installed via `npm` \n```\nnpm install css-ripple-effect\n```\nOr you can use `yarn`\n```\nyarn add css-ripple-effect --production\n```\nOr you can use `bower`\n```\nbower install css-ripple-effect\n```\n\n\nOr you can simply download it in your project, but that way you don't have the option to update if newer versions appear.\n\nSupporters\n==========\n\n- **BrowserStack**: Live, Web-Based Browser Testing https://browserstack.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmladenplavsic%2Fcss-ripple-effect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmladenplavsic%2Fcss-ripple-effect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmladenplavsic%2Fcss-ripple-effect/lists"}