GitHub

Fancy Button


Install

Copy and paste the following code into your project.

import { cn } from "@/lib/utils";
import type React from "react";
 
interface FancyButtonProps
	extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
function FancyButton({ className, children, ...props }: FancyButtonProps) {
	return (
		<button
			className={cn(
				"group px-4 py-1 rounded-lg font-medium bg-linear-to-b from-neutral-700 to-neutral-800 text-neutral-50 shadow-md shadow-black/15 border border-neutral-900 inset-shadow-[0_2px_1px_-1px] inset-shadow-white/60 active:inset-shadow-none transition",
				className,
			)}
			{...props}
		>
			<span className="block transform-3d group-active:translate-y-px">
				{children}
			</span>
		</button>
	);
}
 
export { FancyButton };