Tailwind CSS buttons
A curated list of awesome, battle tested Tailwind CSS buttons components
All the buttons can be copied directly from the preview. The source code is also available in the Installation section.
Installation (optional)
Install dependencies
npm i framer-motion clsx tailwind-merge react-element-to-jsx-string
Add util file
lib/utils.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
Copy these keyframe and animation styles in tailwind.config.ts
file
tailwind.config.ts
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
darkMode: "class",
theme: {
extend: {
animation: {
shimmer: "shimmer 2s linear infinite",
},
keyframes: {
shimmer: {
from: {
backgroundPosition: "0 0",
},
to: {
backgroundPosition: "-200% 0",
},
},
},
},
},
plugins: [],
};
Copy the source code (optional)
components/ui/tailwindcss-buttons.tsx
"use client";
import React from "react";
import { IconClipboard } from "@tabler/icons-react";
import { cn } from "@/lib/utils";
export const ButtonsCard = ({
children,
className,
onClick,
}: {
children?: React.ReactNode;
className?: string;
onClick?: () => void;
}) => {
return (
<div
onClick={onClick}
className={cn(
"h-60 w-full bg-white rounded-xl border border-neutral-100 dark:bg-black dark:border-white/[0.2] hover:border-neutral-200 group/btn overflow-hidden relative flex items-center justify-center",
className
)}
>
<div className="absolute inset-0 dark:bg-dot-white/[0.1] bg-dot-black/[0.1]" />
<IconClipboard className="absolute top-2 right-2 text-neutral-300 group-hover/btn:block hidden h-4 w-4 transition duration-200" />
<div className="relative z-40">{children}</div>
</div>
);
};
Get beautiful, hand-crafted templates and components with Aceternity UI Pro
Professional, beautiful and elegant templates for your business. Get the best component packs and templates with Aceternity UI Pro.
Manu was quick to respond, very professional, and delivered a website within a week. Very good job. Looking forward to collaborating again
Asriel Han
Founder, CTO at Advex AI