Displays a beautiful Button Border Trail.
tailwind.config.jsAdd the following animations to your tailwind.config.js file:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
keyframes: {
trail: {
"0%": { "--angle": "0deg" },
"100%": { "--angle": "360deg" },
},
},
animation: {
trail: "trail var(--duration) linear infinite",
},
},
},
}Add the css to your globle.css file:
@property --angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
| Prop | Type | Description |
|---|---|---|
| duration | string | The duration of the animation. |
| trailColor | string | Border Trail color. |
| trailSize | string | "sm" | "md" | "lg" |
| contentClassName | string | Additional classes for the Border Trail. |
| children | React.ReactNode | The content of the Border Trail.. |
| className | string | Additional classes for the Border Trail.. |
export default function LinkButton(className: string) {
const { resolvedTheme } = useTheme()
return (
<AnimatedBorderTrail
trailColor={resolvedTheme === "dark" ? "#ff0" : "purple"}
className={cn(
"border border-border bg-base-100 dark:bg-base-500",
className
)}
>
<button
className={cn(
"group relative bg-white dark:bg-black p-2 text-xl font-semibold",
className
)}
>
<a href={"#"}>
<span className="px-8 font-semibold">Button with Trail</span>
</a>
</button>
</AnimatedBorderTrail>
)
}