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-stringAdd util file
utils/cn.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 "@/utils/cn";
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>
);
};