Docs
Slider Button

Slider Button

A stylish button with sliding text and arrow animation

Installation

Copy and paste the following code into your project.

"use client"
 
import { useState } from "react"
import { ArrowRight } from "lucide-react"
 
import { Button } from "@/components/ui/button"
 
export function SliderButton({
  name1,
  name2,
  onClick,
}: {
  name1: string
  name2: string
  onClick: () => void
}) {
  const [isHovered, setIsHovered] = useState(false)
 
  return (
    <Button
      className="relative overflow-hidden bg-background text-foreground hover:text-white border-2 border-primary px-6 py-3 rounded-md transition-all duration-300 ease-in-out group"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <span className="relative z-10 flex items-center transition-transform duration-300 ease-in-out group-hover:-translate-x-5">
        <span
          className={`transition-opacity duration-300 ${
            isHovered ? "opacity-0" : "opacity-100"
          }`}
        >
          {name1}
        </span>
        <span
          className={`absolute left-0 transition-opacity duration-300 ${
            isHovered ? "opacity-100" : "opacity-0"
          }`}
        >
          {name2}
        </span>
        <ArrowRight className="ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-5" />
      </span>
      <span className="absolute bottom-0 left-0 h-[2px] w-full bg-primary transform origin-left transition-transform duration-300 ease-out scale-x-0 group-hover:scale-x-100" />
    </Button>
  )
}

Update the import paths to match your project setup.

Usage

import SliderButton from "@/components/ui/slider-button"
export default function SliderButtonDemo() {
  return (
    <div className="w-full max-w-4xl">
      <div className="p-2">
        <h3 className="text-xl font-semibold">SliderButton</h3>
      </div>
      <div className="min-h-[200px] p-4 flex flex-col justify-center items-center border border-dashed rounded-lg space-y-4">
        <SliderButton 
          name1="Discover More" 
          name2="Let's Go" 
          onClick={() => console.log('Button clicked')} 
        />
      </div>
    </div>
  )
}
Particle ButtonGradient Button