Docs
Shining Button

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

Edit this page on GitHub
Get started buttonSwipe Button