StackBits

Buttons

Animated Gradient Button

Copy Button

Hold Button

Toggle Button

Moving Border Button

Navigation Button

Pagination Button

Random Button

Shine Button

Backgrounds

Glowing Dots Background

Prismatic Haze Background

Proximity Background

Space Travel

Wavy Background

Texts

Blur Text

Bounce In Text

Dotted Text

Glitch Text

Gooey Words

Hidden Text

Pixelated Text

Rainbow Text

Sentence Flip

Wavy Text

Utilities

Axios Interceptor

Custom Logger

Dark & Light Theme

Debounce

Encryption Decryption

Express Server

Regex Validations

Yup Validations

Pagination Button

Animated pagination buttons with sliding arrow icons and smooth hover effects. Features previous/next variants with color-coded styling and engaging micro-interactions for enhanced user experience.

Install dependencies

npm i  lucide-react tailwindcss   clsx

Utility function

Create a file lib/utils.ts and paste this code

import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Pagination Button

Create a file pagination-button.tsx in your components folder and paste this code

import { cn } from '@/lib/utils';
import { ClassValue } from 'clsx';
import { ArrowLeft, ArrowRight } from 'lucide-react';
import React from 'react';

interface PaginationButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'previous' | 'next';
  children?: React.ReactNode;
  className?: string;
}

const PaginationButton = ({
  variant = 'next',
  children,
  className,
  ...props
}: PaginationButtonProps) => {
  const variantClasses: Record<string, ClassValue> = {
    previous: 'bg-orange-500 flex-row-reverse !pr-3.5',
    next: 'bg-blue-500 !pl-3.5'
  };

  const iconVariantClasses: Record<string, ClassValue> = {
    previous: 'border-orange-400',
    next: 'border-blue-400'
  };

  return (
    <button
      className={cn(
        variantClasses[variant],
        'px-1 py-1 rounded-full flex text-sm items-center gap-2 group hover:gap-2.5 hover:scale-x-105 active:scale-x-95 active:gap-2 transition-all duration-200',
        className
      )}
      {...props}
    >
      {children}
      {/* icon */}
      <span
        className={cn(
          iconVariantClasses[variant],
          'border-2 w-7 h-7 flex items-start justify-start rounded-full bg-white text-black overflow-hidden'
        )}
      >
        {variant === 'previous' ? (
          <div className="w-14 h-6 flex items-start justify-start gap-0 group-hover:-translate-x-6 transition-all duration-300 ease-in-out">
            <div className="w-6 h-6 flex items-center justify-center">
              <ArrowLeft className="w-5 h-5" strokeWidth={2} />
            </div>
            <div className="w-6 h-6 flex items-center justify-center">
              <ArrowLeft className="w-5 h-5" strokeWidth={2} />
            </div>
          </div>
        ) : (
          <div className="w-14 h-6 flex items-start justify-start gap-0 -translate-x-6 group-hover:translate-x-0 transition-all duration-300 ease-in-out">
            <div className="w-6 h-6 flex items-center justify-center">
              <ArrowRight className="w-5 h-5" strokeWidth={2} />
            </div>
            <div className="w-6 h-6 flex items-center justify-center">
              <ArrowRight className="w-5 h-5" strokeWidth={2} />
            </div>
          </div>
        )}
      </span>
    </button>
  );
};

export default PaginationButton;

Usage

<div className="flex gap-4 items-center justify-center">
    <PaginationButton variant="previous">Previous</PaginationButton>
    <PaginationButton variant="next">Next</PaginationButton>
</div>