Docs
Shining Button
This is a button with shining effect on hover.
requires interactionhover
Loading...
Installation
CLI
pnpm dlx shadcn@latest add https://animata.design/r/button/shining-button.jsonManual
Install dependencies
npm install lucide-reactAdd to your CSS
@theme {
--bg-striped: repeating-linear-gradient(45deg, #3B3A3D, #3B3A3D 5px, transparent 5px, transparent 20px);
--animate-blink-red: blink-red 2s infinite linear;
}
@keyframes blink-red {
0%, 100% {
background-color: rgba(239, 68, 68, 0.7);
box-shadow: 0 0 30px 10px rgba(239, 68, 68, 0.5);
}
50% {
background-color: rgba(239, 68, 68, 0.5);
box-shadow: 0 0 30px 10px rgba(239, 68, 68, 1);
}
}Run the following command
It will create a new file called shining-button.tsx inside the components/animata/button directory.
mkdir -p components/animata/button && touch components/animata/button/shining-button.tsxPaste the code
Open the newly created file and paste the following code:
import { ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";
export default function ShiningButton() {
const label = "See Calendar";
return (
<button className="group/shine cursor-pointer rounded-xl border-4 border-violet-800/0 bg-transparent p-1 transition duration-500 hover:border-violet-800/100">
<div className="relative flex items-center justify-center gap-4 overflow-hidden rounded-lg bg-violet-800 px-6 py-4 font-bold text-white">
{label}
<ArrowRight className="transition group-hover/shine:translate-x-2 group-hover/shine:scale-125" />
<div
className={cn(
"absolute -left-16 top-0 h-full w-12 rotate-[30deg] scale-y-150 bg-white/10 transition duration-700 group-hover/shine:left-[calc(100%+1rem)]",
)}
/>
</div>
</button>
);
}Credits
Built by Sanjaya Acharya