Docs

Gradient Button

A dynamic button that features a vibrant gradient animation, smoothly transitioning between colors.

Installation

Install dependencies

npm install

npm install clsx tailwind-merge

Add utils file

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Add the following code in your tailwind.config.js file

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      animation: {
        "gradient-btn": "gradient-btn calc(var(--duration)) ease infinite",
      },
      keyframes: {
        "gradient-btn": {
          "0%": {
            "background-position": "0% 50%"
          },
          "50%": {
            "background-position" : "100% 50%",
          },
          "100%": {
            "background-position": "0% 50%",
          }
        }
      }
    },
  },
  plugins: [],
};

Copy the source code

gradient-button.tsx

"use client";
 
import React, { ReactNode, CSSProperties } from "react";
import { cn } from "@/lib/utils";
 
interface GradientButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: ReactNode;
  colorFrom?: string;
  colorTo?: string;
  duration?: number;
  className?: string;
}
 
export default function GradientButton({
  children,
  colorFrom = "#fc6a55",
  colorTo = "#f8c940",
  duration = 2,
  className,
  ...props
}: GradientButtonProps) {
  return (
    <button
      style={
        {
          "--duration": `${duration}s`,
          "--color-from": colorFrom,
          "--color-to": colorTo,
        } as CSSProperties
      }
      className={cn(
        "relative text-white bg-gradient-to-r from-[var(--color-from)] to-[var(--color-to)] bg-[length:300%_300%] animate-gradient-btn h-10 px-4 py-2 inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
        className
      )}
      {...props}
    >
      {children}
    </button>
  );
}

Props

Prop	Type	Description	Default
className	String	The class name for the component, allowing for custom styling.	-
colorFrom	String	The starting color of the gradient animation.	#fc6a55
colorTo	String	The ending color of the gradient animation.	#f8c940
duration	Number	The duration of the gradient animation in seconds.	2
children	React.ReactNode	The content inside the button, typically text or other elements.	undefined