Components
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.
npx shadcn@latest add https://21st.dev/r/easemize/multi-type-ripple-buttonsLoading preview...
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 };