Gradient Button

buttons

Sleek mesh-gradient background button with dynamic lighting and glow on hover.

#button#gradient#colorful#glow

Live Interactive Preview

Component Source Code

Select language in the dropdown

GradientButton.tsx

1'use client';
2
3import React from 'react';
4import { Sparkles } from 'lucide-react';
5
6export default function GradientButton() {
7  return (
8    <button className="group relative inline-flex items-center gap-2 overflow-hidden rounded-xl bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 px-6 sm:px-7 py-2.5 sm:py-3 text-sm font-semibold text-white shadow-md shadow-indigo-500/25 transition-all duration-300 hover:shadow-lg hover:shadow-indigo-500/40 hover:-translate-y-0.5 active:translate-y-0 active:scale-95">
9      <span className="absolute inset-0 bg-white/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
10      <Sparkles className="h-4 w-4 animate-pulse" />
11      <span className="relative z-10">Explore Magic</span>
12    </button>
13  );
14}

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/GradientButton.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

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