Docs
Shining Button
This is a button with shining effect on hover.
requires interactionhover
Installation
Install dependencies
npm install lucide-react
Update tailwind.config.js
Add the following to your tailwind.config.js file.module.exports = {
theme: {
extend: {
backgroundImage: {
striped:
"repeating-linear-gradient(45deg, #3B3A3D, #3B3A3D 5px, transparent 5px, transparent 20px)",
},
keyframes: {
"blink-red": {
"0%, 100%": {
backgroundColor: "rgba(239, 68, 68, 0.7)",
boxShadow: "0 0 30px 10px rgba(239, 68, 68, 0.5)",
},
"50%": {
backgroundColor: "rgba(239, 68, 68, 0.5)",
boxShadow: "0 0 30px 10px rgba(239, 68, 68, 1)",
},
},
},
animation: {
"blink-red": "blink-red 2s infinite linear",
},
},
},
};
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.tsx
Paste 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 cursor-pointer rounded-xl border-4 border-violet-800 border-opacity-0 bg-transparent p-1 transition-all duration-500 hover:border-opacity-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-all group-hover:translate-x-2 group-hover:scale-125" />
<div
className={cn(
"absolute -left-16 top-0 h-full w-12 rotate-[30deg] scale-y-150 bg-white/10 transition-all duration-700 group-hover:left-[calc(100%+1rem)]",
)}
/>
</div>
</button>
);
}
Credits
Built by Sanjaya Acharya