Components
Loading preview...
A sleek button featuring floating fish that appear on hover. Credit: https://codepen.io/ash_creator/pen/GRGZYyV
@Northstrix
npx shadcn@latest add https://21st.dev/r/maxim.bort.devel/fishy-buttonimport React from "react";
import { FishyButton } from "@/components/ui/fishy-button";
const DemoFishyButton = () => (
<div className="flex flex-col gap-8 w-full">
<div className="flex flex-wrap items-center justify-center gap-6 w-full">
<FishyButton
type="button"
className="button--1"
onClick={() => console.log("The first button has been clicked")}
>
Ekhad
</FishyButton>
<FishyButton
type="button"
className="button--2"
borderRadius="4px"
fishSpeed="1.9s"
onClick={() => console.log("The second button has been clicked")}
>
Two
</FishyButton>
<FishyButton
type="button"
className="button--3"
onClick={() => console.log("The third button has been clicked")}
>
שלוש
</FishyButton>
</div>
<div className="flex flex-wrap items-center justify-center gap-6 w-full">
<FishyButton
type="button"
className="button--1"
fontFamily="'Roboto Mono', monospace"
borderRadius="40px"
width="272px"
onClick={() => console.log("Roboto Mono button clicked")}
>
Roboto Mono
</FishyButton>
<FishyButton
type="button"
className="button--2"
fontFamily="'Impact', fantasy, sans-serif"
borderRadius="10px"
width="272px"
onClick={() => console.log("Impact Bold button clicked")}
>
Impact Bold
</FishyButton>
</div>
<div className="flex justify-center w-full">
<FishyButton
type="button"
className="button--3"
width="216px"
fishSpeed="6s"
fontFamily="'Griffy', cursive"
borderRadius="50px"
onClick={() => console.log("Slow fish clicked")}
>
Slow Fish
</FishyButton>
</div>
</div>
);
export { DemoFishyButton };