Swipe button
It will create a new file called swipe-button.tsx inside the components/animata/button directory.
swipe-button.tsx
components/animata/button
mkdir -p components/animata/button && touch components/animata/button/swipe-button.tsx
Open the newly created file and paste the following code:
"use client"; import React from "react"; import { cn } from "@/lib/utils"; interface SwipeButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { firstText: string; secondText: string; className?: string; firstClass?: string; secondClass?: string; } export default function SwipeButton({ className = "", secondText = "Get access", firstText = "Get access", firstClass = "bg-orange-500 text-white", secondClass = "bg-black text-white", ...props }: SwipeButtonProps) { const common = "block px-4 py-2 text-2xl font-bold duration-300 ease-in-out"; return ( <button {...props} className={cn("group relative min-w-fit overflow-hidden rounded-md", className)} > <span className={cn( "absolute inset-0 translate-y-full group-hover:translate-y-0", common, secondClass, )} > {secondText} </span> <span className={cn("group-hover:-translate-y-full", common, firstClass)}>{firstText}</span> </button> ); }
Built by Sumin Gurung