Shining Button

npm install lucide-react

@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);
  }
}

mkdir -p components/animata/button && touch components/animata/button/shining-button.tsx

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-colors 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-all duration-700 ease-in-out 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-all duration-700 ease-in-out group-hover/shine:left-[calc(100%+1rem)]",
          )}
        />
      </div>
    </button>
  );
}