A minimal collection of Tailwind-powered buttons ready to use in your next project. Copy, customize, and use them instantly.
BtnUI is a powerful UI library that provides a collection of ready-to-use buttons built with Tailwind CSS. The buttons can be easily copied, customized, and integrated into your own projects.
| Technology | Details |
|---|---|
| Framework | Next.js (bootstrapped via create-next-app) |
| Styling | Tailwind CSS |
| Font | Inter (optimized using next/font) |
| Languages | TypeScript |
- Pre-built buttons with Tailwind CSS
- Copy-paste ready code snippets
- Lightweight, fast, and developer-friendly
- Licensed under MIT
Make sure you have the following installed:
- Node.js (>= 18 recommended)
- npm, yarn, pnpm, or bun
- Git (optional, but recommended)
Clone the repository and install dependencies:
git clone https://github.com/amitkushh/BtnUI.git
cd BtnUIFirst, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
export default function Example() {
return (
<button className="relative px-8 py-3 overflow-hidden font-semibold bg-black group border-2 border-black rounded-xl cursor-pointer text-white">
<span className="absolute inset-0 w-full h-full bg-white transform scale-x-0 origin-left rounded-tr-full rounded-br-full group-hover:scale-x-100 group-focus:scale-x-100 transition-transform duration-800 ease-in-out z-0"></span>
<span className="absolute inset-0 w-full h-full bg-black transform scale-x-0 origin-right rounded-tl-full group-hover:scale-x-100 group-focus:scale-x-100 transition-transform duration-800 ease-in-out z-0"></span>
<span className="relative z-10 text-white transition-colors duration-800">
Login
</span>
</button>
);
}(Adjust the path and component name according to your project structure.)
1.Modify Tailwind classes to change colors, spacing, and hover effects.