Docs

Gradient Slide Button

A dynamic and stylish button that reveals a vibrant gradient as you hover over it.

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));
}

Copy the source code

gradient-slide-button.tsx

"use client";
 
import * as React from "react";
import { cn } from "@/lib/utils";
 
interface GradientSlideButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
  className?: string;
  colorFrom?: string;
  colorTo?: string;
}
 
export default function GradientSlideButton({
  children,
  className,
  colorFrom = "#d946ef",
  colorTo = "#7c3aed",
  ...props
}: GradientSlideButtonProps) {
  return (
    <button
      style={{
        "--color-from": colorFrom,
        "--color-to": colorTo,
      } as React.CSSProperties}
      className={cn(
        "relative overflow-hidden bg-neutral-100 text-black dark:bg-neutral-900 dark:text-white h-10 px-4 py-2 inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-300 hover:scale-110",
        "before:absolute before:rounded-[inherit] before:top-0 before:left-[-100%] before:w-full before:h-full before:bg-gradient-to-l before:from-[var(--color-from)] before:to-[var(--color-to)] before:transition-all before:duration-200",
        "hover:before:left-0 hover:text-white ",
        className
      )}
      {...props}
    >
      <span className="relative z-10">{children}</span>
    </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 that appears on hover.	"#d946ef"
colorTo	string	The ending color of the gradient that appears on hover.	"#7c3aed"
children	React.ReactNode	The content inside the button, typically text or icons.	undefined