Multi Type Ripple Buttons

Buttons 235

About

Part of the EaseMize library, this highly customizable React button component offers a theme-aware JavaScript click ripple and four distinct visual variants (default, ghost, hover, hoverborder). Designed to be "Easy to use, great to customize," it seamlessly integrates rich visual feedback and interactive hover animations into your applications.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Multi Type Ripple Buttons to your project and fits it to your theme.

Code

How Multi Type Ripple Buttons is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { RippleButton } from "@/components/ui/multi-type-ripple-buttons";

const DemoOne = () => {
  return (
    <div className="flex w-full h-screen justify-center items-center flex-row gap-4">
      <RippleButton> Click Me </RippleButton>
      <RippleButton variant="hover" hoverRippleColor="#16A34A"> 
        <div className="flex items-center gap-2">
          <span>✓</span>
          <span>Success</span>
        </div>
      </RippleButton>
      <RippleButton variant="ghost" className="rounded-full"> X </RippleButton>
      <RippleButton variant="hoverborder" hoverBorderEffectThickness="3px" hoverBorderEffectColor="#DC2626"> Border </RippleButton>
    </div>
  );
};

export { DemoOne };