Ripple effect for your buttons. Try interactive CodeSandbox demo or Storybook demo.
npm install react-ripple-clickimport { Ripple } from 'react-ripple-click'
import 'react-ripple-click/dist/index.css'
const App = () => {
return (
<button
style={{
position: 'relative',
overflow: 'hidden',
isolation: 'isolate',
}}
>
<Ripple />
Click me
</button>
)
}Put to any parent element the following CSS custom properties to override the default ripple effect:
:root {
--Ripple-custom-opacity: 0.2;
--Ripple-custom-duration: 0.6s;
--Ripple-custom-timing-function: ease-in;
--Ripple-custom-color: currentColor;
}