Star Button
The StarButton is a visually striking button that features a radial light animation with a starry background.
The StarButton is a visually striking button that features a radial light animation with a starry background.
Installation
npx shadcn@latest add https://badtz-ui.com/r/star-button.jsonInstall the following dependencies:
npm install clsx tailwind-mergeAdd the utils file to the @/lib folder
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}Copy and paste the following code into your project.
Component: star-button
Tailwind v4: Update @/global.css
@theme inline {
--animate-star-btn: star-btn calc(var(--duration) * 1s) linear infinite;
}
@keyframes star-btn {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}Tailwind v3: Update tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
keyframes: {
"star-btn": {
"0%": { "offset-distance": "0%" },
"100%": { "offset-distance": "100%" },
},
}
animation: {
"star-btn": "star-btn calc(var(--duration)*1s) linear infinite",
},
},
},
}Update the import paths to match your project setup.
Usage
import { StarButton } from "@/components/ui/star-button";<StarButton className="rounded-3xl">Hover me</StarButton>Props
StarButton props.
Type information not available