Fold Button
A button with a smooth fold-style hover animation and customizable accent color. Clean, interactive, and visually engaging.
Installation
npx shadcn@latest add https://fluxbuttons.vercel.app/r/fold-button.json.json"use client"
import * as React from "react";
import { cn } from "@/lib/utils";
export interface FoldButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
foldColor?: string
}
const FoldButton = React.forwardRef<HTMLButtonElement, FoldButtonProps>(
({ className, children, foldColor = "#137ad5ff", ...props }, ref) => {
return (
<button
ref={ref}
{...props}
className={cn(
"relative flex items-center cursor-pointer px-6 py-3 overflow-hidden font-medium transition-all bg-sky-500 rounded-md group",
className
)} >
<span
style={{ backgroundColor: foldColor }}
className="absolute top-0 right-0 inline-block w-4 h-4 transition-all duration-500 ease-in-out rounded group-hover:-mr-4 group-hover:-mt-4"
>
<span className="absolute top-0 right-0 w-5 h-5 rotate-45 translate-x-1/2 -translate-y-1/2 bg-white" />
</span>
<span
style={{ backgroundColor: foldColor }}
className="absolute bottom-0 rotate-180 left-0 inline-block w-4 h-4 transition-all duration-500 ease-in-out rounded group-hover:-ml-4 group-hover:-mb-4"
>
<span className="absolute top-0 right-0 w-5 h-5 rotate-45 translate-x-1/2 -translate-y-1/2 bg-white" />
</span>
<span
style={{ backgroundColor: foldColor }}
className="absolute bottom-0 left-0 w-full h-full transition-all duration-500 ease-in-out delay-200 -translate-x-full rounded-md group-hover:translate-x-0"
/>
<span className="relative z-10">{children}</span>
</button>
)
}
)
FoldButton.displayName = "FoldButton"
export default FoldButtonUsage
import FoldButton from "@/components/ui/fold-button";
export default function Usage() {
return <FoldButton>Hover Me</FoldButton>;
}Examples
Fold Color
import FoldButton from "@/components/ui/fold-button";
export default function Usage() {
return (
<FoldButton className="bg-red-400" foldColor="#137ad5ff">
Hover Me
</FoldButton>
);
}API Reference
Fold Button
The Fold Button component is a wrapper around the button element that adds a variety of styles and functionality.
Prop
Type
Splash Button
Motion-enhanced button featuring a subtle animated wave pattern that flows across the surface on hover, adding energy, depth, and visual feedback without overpowering the UI.
Sweep Button
A button with a glowing sweep animation that slides across on hover, featuring customizable sweep and background colors for a sharp, modern look.