Components
Loading preview...
A button with a unique hover effect. You can also get this component from https://namer-ui.netlify.app/ and https://namer-ui-for-vue.netlify.app/components/chronicle-button Credit: https://codepen.io/Haaguitos/pen/OJrVZdJ
@Northstrix
npx shadcn@latest add https://21st.dev/r/maxim.bort.devel/chronicle-buttonimport React from "react";
import { ChronicleButton } from "@/components/ui/chronicle-button";
export const ChronicleButtonDemo = () => (
<section>
<div className="bg-[#18181c] rounded-lg flex flex-col items-center justify-center relative gap-8 py-14 px-8">
<div className="flex gap-6 flex-wrap justify-center items-center mt-8">
<ChronicleButton
text="Hover Me"
onClick={() => console.log("The first button has been clicked")}
/>
<ChronicleButton
text="Blue (1.4em)"
onClick={() => console.log("The blue button has been clicked")}
width="200px"
hoverColor="#90BAFD"
borderRadius="1.4em"
/>
<ChronicleButton
text="Outlined (-6px)"
onClick={() => console.log("The outlined button has been clicked")}
hoverColor="#CC8DFD"
width="200px"
outlined={true}
outlinePaddingAdjustment="6px"
/>
</div>
</div>
<div className="bg-white rounded-lg flex flex-col items-center justify-center relative gap-8 py-14 px-8 mt-12">
<div className="flex gap-6 flex-wrap justify-center items-center">
<ChronicleButton
text="Dark Button"
onClick={() => console.log("Dark button on light background")}
customBackground="#18181c"
customForeground="#f7f7ff"
hoverForeground="#0a0a0a"
hoverColor="#00a6fb"
/>
<ChronicleButton
text="Outlined Dark"
onClick={() => console.log("Outlined dark on light background")}
customBackground="#18181c"
customForeground="#f7f7ff"
hoverColor="#00affb"
outlined={true}
/>
<ChronicleButton
text="Custom Font"
onClick={() => console.log("Custom font button")}
customBackground="#22223b"
customForeground="#f7f7ff"
fontFamily="'JetBrains Mono', monospace"
borderRadius="2em"
hoverForeground="#f7f7ff"
hoverColor="#9722ff"
/>
</div>
</div>
</section>
);