Ripple Button

components/snippet/ripple-button.tsx

Installation

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Update tailwind.config.js

Add the following animations to your tailwind.config.js file:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        rippling: "rippling 400ms ease-out",
      },
      keyframes: {
        rippling: {
          "0%": {
            opacity: "1",
          },
          "100%": {
            transform: "scale(2)",
            opacity: "0",
          },
        },
      },
    },
  },
};

Props

Prop	Type	Description
children	React.ReactNode	The content of the button.
className	string	Additional class names for the button.
rippleColor	string	The rbg numbers only for the color of the rippling waves.
duration	string	The time span of one ripple.