Shine Button

buttons

High-contrast dark button with a recurring metallic light beam sweep effect.

#button#shine#sweep#animation

Live Interactive Preview

Component Source Code

Select language in the dropdown

ShineButton.tsx

1'use client';
2
3import React from 'react';
4import { Zap } from 'lucide-react';
5
6export default function ShineButton() {
7  return (
8    <button className="group relative overflow-hidden rounded-xl bg-slate-900 dark:bg-slate-100 px-6 sm:px-7 py-2.5 sm:py-3 text-sm font-semibold text-white dark:text-slate-900 shadow-md transition-all hover:scale-105 active:scale-95">
9      <div className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/30 dark:via-black/20 to-transparent transition-transform duration-1000 group-hover:translate-x-full" />
10      <span className="relative z-10 flex items-center gap-2">
11        <Zap className="h-4 w-4 text-amber-400 fill-amber-400" />
12        Instant Action
13      </span>
14    </button>
15  );
16}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/buttons/ShineButton.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import ShineButton from '@/components/buttons/ShineButton';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <ShineButton />
7    </main>
8  );
9}