---
title: Shining Button
description: This is a button with shining effect on hover.
labels: ["requires interaction", "hover"]
author: sanjaya22780
---

<ComponentPreview name="button-shining-button--docs" />

## Installation

<Steps>
<Step>Install dependencies</Step>

```bash
npm install lucide-react
```

<Step>Update `tailwind.config.js`</Step>Add the following to your tailwind.config.js file.

```js
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",
      },
    },
  },
};
```

<Step>Run the following command</Step>

It will create a new file called `shining-button.tsx` inside the `components/animata/button` directory.

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

<Step>Paste the code</Step>

Open the newly created file and paste the following code:

```jsx file=<rootDir>/animata/button/shining-button.tsx

```

</Steps>

## Credits

Built by [Sanjaya Acharya](https://github.com/acharya-sanjaya)
