├── .eslintrc.json
├── .gitignore
├── .prettierrc.json
├── README.md
├── app
    ├── favicon.ico
    ├── globals.css
    ├── layout.tsx
    └── page.tsx
├── components.json
├── components
    ├── app
    │   └── card-component.tsx
    └── buttons
    │   ├── Black1.tsx
    │   ├── Black10.tsx
    │   ├── Black11.tsx
    │   ├── Black12.tsx
    │   ├── Black13.tsx
    │   ├── Black14.tsx
    │   ├── Black2.tsx
    │   ├── Black3.tsx
    │   ├── Black4.tsx
    │   ├── Black5.tsx
    │   ├── Black6.tsx
    │   ├── Black7.tsx
    │   ├── Black8.tsx
    │   ├── Black9.tsx
    │   ├── BlackIcon1.tsx
    │   ├── BlackIcon10.tsx
    │   ├── BlackIcon11.tsx
    │   ├── BlackIcon2.tsx
    │   ├── BlackIcon3.tsx
    │   ├── BlackIcon4.tsx
    │   ├── BlackIcon5.tsx
    │   ├── BlackIcon6.tsx
    │   ├── BlackIcon7.tsx
    │   ├── BlackIcon8.tsx
    │   ├── BlackIcon9.tsx
    │   ├── BlackLoading1.tsx
    │   ├── BlackRound1.tsx
    │   ├── BlackRound2.tsx
    │   ├── BlackRound3.tsx
    │   ├── BlackRound4.tsx
    │   ├── BlackSm1.tsx
    │   ├── BlackSm2.tsx
    │   ├── BlackSmLoading1.tsx
    │   ├── BlackSquare1.tsx
    │   ├── Blue1.tsx
    │   ├── Blue2.tsx
    │   ├── Blue3.tsx
    │   ├── Blue4.tsx
    │   ├── BlueLoading1.tsx
    │   ├── GreySm1.tsx
    │   ├── Letters1.tsx
    │   ├── Letters2.tsx
    │   ├── Letters3.tsx
    │   ├── Letters4.tsx
    │   ├── Link1.tsx
    │   ├── Link2.tsx
    │   ├── Link3.tsx
    │   ├── Link4.tsx
    │   ├── Link5.tsx
    │   ├── Link6.tsx
    │   ├── Link7.tsx
    │   ├── Link8.tsx
    │   ├── Outline1.tsx
    │   ├── Outline2.tsx
    │   ├── Outline3.tsx
    │   ├── Outline4.tsx
    │   ├── Shadow1.tsx
    │   ├── Shadow2.tsx
    │   ├── Shadow3.tsx
    │   ├── Shadow4.tsx
    │   ├── Shadow5.tsx
    │   ├── SquareOutline1.tsx
    │   ├── SubtleSkeuomorphic1.tsx
    │   ├── SubtleSkeuomorphic10.tsx
    │   ├── SubtleSkeuomorphic11.tsx
    │   ├── SubtleSkeuomorphic12.tsx
    │   ├── SubtleSkeuomorphic13.tsx
    │   ├── SubtleSkeuomorphic14.tsx
    │   ├── SubtleSkeuomorphic15.tsx
    │   ├── SubtleSkeuomorphic16.tsx
    │   ├── SubtleSkeuomorphic17.tsx
    │   ├── SubtleSkeuomorphic2.tsx
    │   ├── SubtleSkeuomorphic3.tsx
    │   ├── SubtleSkeuomorphic4.tsx
    │   ├── SubtleSkeuomorphic5.tsx
    │   ├── SubtleSkeuomorphic6.tsx
    │   ├── SubtleSkeuomorphic7.tsx
    │   ├── SubtleSkeuomorphic8.tsx
    │   ├── SubtleSkeuomorphic9.tsx
    │   ├── White1.tsx
    │   ├── White2.tsx
    │   └── White3.tsx
├── data
    └── buttons.ts
├── lib
    └── utils.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── cover.png
    └── opengraph-image.jpg
├── screens
    └── home.tsx
├── tailwind.config.ts
└── tsconfig.json


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 |  {
2 |   "bracketSpacing": true,
3 |   "semi": true,
4 |   "trailingComma": "all",
5 |   "printWidth": 80,
6 |   "tabWidth": 2,
7 |   "plugins": ["prettier-plugin-tailwindcss"]
8 | }
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |  <img src="public/cover.png" width="100%" />
2 | 
3 | <p align="center">A collection of buttons for Tailwind CSS.</p>
4 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibelick/buttons/03d7a89e614c1b16a8af4b65f2ccd3e8ca07b866/app/favicon.ico


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import Script from "next/script";
 3 | import { Inter } from "next/font/google";
 4 | import "./globals.css";
 5 | import { Toaster } from "sonner";
 6 | 
 7 | const inter = Inter({ subsets: ["latin"] });
 8 | 
 9 | export const metadata: Metadata = {
10 |   title: "Tailwind CSS button collection - Click-to-copy integration",
11 |   description:
12 |     "Discover a collection of Tailwind CSS buttons designed to enhance your website's look. Easy to integrate with a copy-paste, no js.",
13 |   openGraph: {
14 |     title: "Tailwind CSS button collection - Click-to-copy integration",
15 |     description:
16 |       "Discover a collection of Tailwind CSS buttons designed to enhance your website's look. Easy to integrate with a copy-paste, no js.",
17 |     type: "website",
18 |     url: "https://buttons.ibelick.com",
19 |     images: [
20 |       {
21 |         url: "https://buttons.ibelick.com/opengraph-image.jpg",
22 |         alt: "Tailwind CSS button collection - Click-to-copy integration",
23 |       },
24 |     ],
25 |   },
26 |   twitter: {
27 |     site: "@ibelick",
28 |     images: [
29 |       {
30 |         url: "https://buttons.ibelick.com/opengraph-image.jpg",
31 |         alt: "Tailwind CSS button collection - Click-to-copy integration",
32 |       },
33 |     ],
34 |   },
35 | };
36 | 
37 | export default function RootLayout({
38 |   children,
39 | }: {
40 |   children: React.ReactNode;
41 | }) {
42 |   const isDev = process.env.NODE_ENV === "development";
43 | 
44 |   return (
45 |     <html lang="en">
46 |       {!isDev ? (
47 |         <Script
48 |           async
49 |           src="https://analytics.umami.is/script.js"
50 |           data-website-id="9b94d3fb-fba5-48e9-8c6b-a80fca312be2"
51 |         />
52 |       ) : null}
53 |       <Toaster />
54 |       <body className={`${inter.className} overflow-x-hidden`}>{children}</body>
55 |     </html>
56 |   );
57 | }
58 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { Home as HomeScreen } from "@/screens/home";
2 | 
3 | export default function Home() {
4 |   return <HomeScreen />;
5 | }
6 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": false,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
17 | }


--------------------------------------------------------------------------------
/components/app/card-component.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { CopyIcon, CheckIcon } from "@radix-ui/react-icons";
 3 | import { useState } from "react";
 4 | import { toast } from "sonner";
 5 | import { createRoot } from "react-dom/client";
 6 | import { flushSync } from "react-dom";
 7 | 
 8 | type CardComponentProps = {
 9 |   children: React.ReactNode;
10 | };
11 | 
12 | export const CardComponent: React.FC<CardComponentProps> = ({ children }) => {
13 |   const [hasCheckIcon, setHasCheckIcon] = useState(false);
14 | 
15 |   const getCode = () => {
16 |     const div = document.createElement("div");
17 |     const root = createRoot(div);
18 |     flushSync(() => {
19 |       root.render(children);
20 |     });
21 | 
22 |     const code = div.innerHTML;
23 |     return code;
24 |   };
25 | 
26 |   const onCopy = () => {
27 |     const code = getCode();
28 |     toast.success("Copied to clipboard!");
29 |     navigator.clipboard.writeText(code);
30 |     setHasCheckIcon(true);
31 | 
32 |     setTimeout(() => {
33 |       setHasCheckIcon(false);
34 |     }, 1000);
35 |   };
36 | 
37 |   return (
38 |     <div className="relative flex items-center justify-center rounded-[4px] bg-neutral-50 px-0 py-24 md:px-2">
39 |       <div
40 |         className="absolute right-3 top-3 cursor-pointer bg-transparent p-2"
41 |         onClick={onCopy}
42 |       >
43 |         <div
44 |           className={`absolute inset-0  transform transition-all duration-300  ${
45 |             hasCheckIcon ? "scale-0 opacity-0" : "scale-100 opacity-100"
46 |           }`}
47 |         >
48 |           <CopyIcon className="text-neutral-600" />
49 |         </div>
50 |         <div
51 |           className={`absolute inset-0 transform transition-all duration-300  ${
52 |             hasCheckIcon ? "scale-100 opacity-100" : "scale-0 opacity-0"
53 |           }`}
54 |         >
55 |           <CheckIcon className="text-neutral-600" />
56 |         </div>
57 |       </div>
58 |       {children}
59 |     </div>
60 |   );
61 | };
62 | 


--------------------------------------------------------------------------------
/components/buttons/Black1.tsx:
--------------------------------------------------------------------------------
1 | export function Black1() {
2 |   return (
3 |     <button className="inline-flex h-12 items-center justify-center rounded-md bg-neutral-950 px-6 font-medium text-neutral-50 transition active:scale-110 ">
4 |       Click me
5 |     </button>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/buttons/Black10.tsx:
--------------------------------------------------------------------------------
1 | export function Black10() {
2 |   return (
3 |     <button className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-neutral-950 px-6 font-medium text-neutral-50">
4 |       <span className="absolute h-0 w-0 rounded-full bg-blue-500 transition-all duration-300 group-hover:h-56 group-hover:w-32"></span>
5 |       <span className="relative">Hover me</span>
6 |     </button>
7 |   );
8 | }
9 | 


--------------------------------------------------------------------------------
/components/buttons/Black11.tsx:
--------------------------------------------------------------------------------
 1 | export function Black11() {
 2 |   return (
 3 |     <button className="group relative h-12 overflow-hidden overflow-x-hidden rounded-md bg-neutral-950 px-8 py-2 text-neutral-50">
 4 |       <span className="relative z-10">Hover Me</span>
 5 |       <span className="absolute inset-0 overflow-hidden rounded-md">
 6 |         <span className="absolute left-0 aspect-square w-full origin-center -translate-x-full rounded-full bg-blue-500 transition-all duration-500 group-hover:-translate-x-0 group-hover:scale-150" />
 7 |       </span>
 8 |     </button>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/components/buttons/Black12.tsx:
--------------------------------------------------------------------------------
 1 | export function Black12() {
 2 |   return (
 3 |     <button className="group relative z-0 h-12 overflow-hidden overflow-x-hidden rounded-md bg-neutral-950 px-8 py-2 text-neutral-50">
 4 |       <span className="relative z-10">Hover Me</span>
 5 |       <span className="absolute inset-0 overflow-hidden rounded-md">
 6 |         <span className="absolute left-0 aspect-square w-full origin-center translate-x-full rounded-full bg-blue-500 transition-all duration-500 group-hover:-translate-x-0 group-hover:scale-150" />
 7 |       </span>
 8 |     </button>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/components/buttons/Black13.tsx:
--------------------------------------------------------------------------------
1 | export function Black13() {
2 |   return (
3 |     <button className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-blue-500 px-6 font-medium text-neutral-50">
4 |       <span className="absolute h-56 w-32 rounded-full bg-neutral-950 transition-all duration-300 group-hover:h-0 group-hover:w-0"></span>
5 |       <span className="relative">Hover me</span>
6 |     </button>
7 |   );
8 | }
9 | 


--------------------------------------------------------------------------------
/components/buttons/Black14.tsx:
--------------------------------------------------------------------------------
1 | export function Black14() {
2 |   return (
3 |     <button className="relative h-12 overflow-hidden rounded bg-neutral-950 px-5 py-2.5 text-white transition-all duration-200 hover:bg-neutral-800 hover:ring-offset-2 active:ring-2 active:ring-neutral-800">
4 |       Click me
5 |     </button>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/buttons/Black2.tsx:
--------------------------------------------------------------------------------
1 | export function Black2() {
2 |   return (
3 |     <button className="inline-flex h-12 items-center justify-center rounded-md bg-neutral-950 px-6 font-medium text-neutral-50 shadow-lg shadow-neutral-500/20 transition active:scale-95">
4 |       Click me
5 |     </button>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/buttons/Black3.tsx:
--------------------------------------------------------------------------------
 1 | export function Black3() {
 2 |   return (
 3 |     <button className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-neutral-950 px-6 font-medium text-neutral-200 duration-500">
 4 |       <div className="translate-x-0 transition group-hover:-translate-x-[150%]">
 5 |         Hover me
 6 |       </div>
 7 |       <div className="absolute translate-x-[150%] transition group-hover:translate-x-0">
 8 |         Hover me
 9 |       </div>
10 |     </button>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/components/buttons/Black4.tsx:
--------------------------------------------------------------------------------
 1 | export function Black4() {
 2 |   return (
 3 |     <button className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-neutral-950 px-6 font-medium text-neutral-200 duration-500">
 4 |       <div className="translate-y-0 transition group-hover:-translate-y-[150%]">
 5 |         Hover me
 6 |       </div>
 7 |       <div className="absolute translate-y-[150%] transition group-hover:translate-y-0">
 8 |         Hover me
 9 |       </div>
10 |     </button>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/components/buttons/Black5.tsx:
--------------------------------------------------------------------------------
 1 | export function Black5() {
 2 |   return (
 3 |     <>
 4 |       <button className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-neutral-950 px-6 font-medium text-neutral-200">
 5 |         <span>Hover me</span>
 6 |         <div className="absolute inset-0 flex h-full w-full justify-center [transform:skew(-12deg)_translateX(-100%)] group-hover:duration-1000 group-hover:[transform:skew(-12deg)_translateX(100%)]">
 7 |           <div className="relative h-full w-8 bg-white/20" />
 8 |         </div>
 9 |       </button>
10 |     </>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/components/buttons/Black6.tsx:
--------------------------------------------------------------------------------
 1 | export function Black6() {
 2 |   return (
 3 |     <>
 4 |       <button className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-neutral-950 px-6 font-medium text-neutral-200 transition hover:scale-110">
 5 |         <span>Hover me</span>
 6 |         <div className="absolute inset-0 flex h-full w-full justify-center [transform:skew(-12deg)_translateX(-100%)] group-hover:duration-1000 group-hover:[transform:skew(-12deg)_translateX(100%)]">
 7 |           <div className="relative h-full w-8 bg-white/20" />
 8 |         </div>
 9 |       </button>
10 |     </>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/components/buttons/Black7.tsx:
--------------------------------------------------------------------------------
1 | export function Black7() {
2 |   return (
3 |     <button className="relative h-12 overflow-hidden rounded bg-neutral-950 px-5 py-2.5 text-white transition-all duration-300 hover:bg-neutral-800 hover:ring-2 hover:ring-neutral-800 hover:ring-offset-2">
4 |       <span className="relative">Hover me</span>
5 |     </button>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/buttons/Black8.tsx:
--------------------------------------------------------------------------------
1 | export function Black8() {
2 |   return (
3 |     <button className="relative overflow-hidden rounded-md bg-neutral-950 px-5 py-2.5 text-white transition-all duration-300 [transition-timing-function:cubic-bezier(0.175,0.885,0.32,1.275)] active:-translate-y-1 active:scale-x-90 active:scale-y-110">
4 |       Click me
5 |     </button>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/buttons/Black9.tsx:
--------------------------------------------------------------------------------
1 | export function Black9() {
2 |   return (
3 |     <button className="relative overflow-hidden rounded-md bg-neutral-950 px-5 py-2.5 text-white duration-300 [transition-timing-function:cubic-bezier(0.175,0.885,0.32,1.275)] active:translate-y-1 active:scale-x-110 active:scale-y-90">
4 |       Click me
5 |     </button>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/buttons/BlackIcon1.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowRightIcon } from "@radix-ui/react-icons";
 2 | 
 3 | export function BlackIcon1() {
 4 |   return (
 5 |     <>
 6 |       <button className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-neutral-950 px-6 font-medium text-neutral-200 duration-500">
 7 |         <div className="translate-x-0 opacity-100 transition group-hover:-translate-x-[150%] group-hover:opacity-0">
 8 |           Hover me
 9 |         </div>
10 |         <div className="absolute translate-x-[150%] opacity-0 transition group-hover:translate-x-0 group-hover:opacity-100">
11 |           <ArrowRightIcon className="h-6 w-6" />
12 |         </div>
13 |       </button>
14 |     </>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/components/buttons/BlackIcon10.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowRightIcon } from "@radix-ui/react-icons";
 2 | 
 3 | export function BlackIcon10() {
 4 |   return (
 5 |     <button className="group relative inline-flex h-12 items-center justify-center rounded-md bg-neutral-950 px-6 font-medium text-neutral-200">
 6 |       <span>Hover me</span>
 7 |       <div className="ml-1 -rotate-45 transition-all duration-200 group-hover:rotate-0">
 8 |         <ArrowRightIcon className="h-5 w-5" />
 9 |       </div>
10 |     </button>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/components/buttons/BlackIcon11.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowRightIcon } from "@radix-ui/react-icons";
 2 | 
 3 | export function BlackIcon11() {
 4 |   return (
 5 |     <button className="group relative inline-flex h-[calc(48px+8px)] items-center justify-center rounded-full bg-neutral-950 py-1 pl-6 pr-14 font-medium text-neutral-50">
 6 |       <span className="z-10 pr-2">Hover me</span>
 7 |       <div className="absolute right-1 inline-flex h-12 w-12 items-center justify-end rounded-full bg-neutral-700 transition-[width] group-hover:w-[calc(100%-8px)]">
 8 |         <div className="mr-3.5 flex items-center justify-center">
 9 |           <ArrowRightIcon className="h-5 w-5 text-neutral-50" />
10 |         </div>
11 |       </div>
12 |     </button>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/components/buttons/BlackIcon2.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowDownIcon } from "@radix-ui/react-icons";
 2 | 
 3 | export function BlackIcon2() {
 4 |   return (
 5 |     <>
 6 |       <button className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-neutral-950 px-6 font-medium text-neutral-200 duration-500">
 7 |         <div className="translate-y-0 opacity-100 transition group-hover:-translate-y-[150%] group-hover:opacity-0">
 8 |           Hover me
 9 |         </div>
10 |         <div className="absolute translate-y-[150%] opacity-0 transition group-hover:translate-y-0 group-hover:opacity-100">
11 |           <ArrowDownIcon className="h-6 w-6" />
12 |         </div>
13 |       </button>
14 |     </>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/components/buttons/BlackIcon3.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowRightIcon, StarIcon } from "@radix-ui/react-icons";
 2 | 
 3 | export function BlackIcon3() {
 4 |   return (
 5 |     <button className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-neutral-950 px-6 font-medium text-neutral-200 duration-500">
 6 |       <div className="relative inline-flex -translate-x-0 items-center transition group-hover:translate-x-6">
 7 |         <div className="absolute -translate-x-4 opacity-0 transition group-hover:-translate-x-6 group-hover:opacity-100">
 8 |           <StarIcon className="h-5 w-5" />
 9 |         </div>
10 |         <span className="pr-6">Hover</span>
11 |         <div className="absolute right-0 translate-x-0 opacity-100 transition group-hover:translate-x-4 group-hover:opacity-0">
12 |           <ArrowRightIcon className="h-5 w-5" />
13 |         </div>
14 |       </div>
15 |     </button>
16 |   );
17 | }
18 | 


--------------------------------------------------------------------------------
/components/buttons/BlackIcon4.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowRightIcon } from "@radix-ui/react-icons";
 2 | 
 3 | export function BlackIcon4() {
 4 |   return (
 5 |     <button className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-neutral-950 px-6 font-medium text-neutral-200">
 6 |       <div className="mr-0 w-0 -translate-x-[100%] opacity-0 transition-all duration-200 group-hover:mr-1 group-hover:w-5 group-hover:translate-x-0 group-hover:opacity-100">
 7 |         <ArrowRightIcon className="h-5 w-5" />
 8 |       </div>
 9 |       <span>Hover me</span>
10 |     </button>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/components/buttons/BlackIcon5.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowRightIcon } from "@radix-ui/react-icons";
 2 | 
 3 | export function BlackIcon5() {
 4 |   return (
 5 |     <button className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-neutral-950 px-6 font-medium text-neutral-200">
 6 |       <span>Hover me</span>
 7 |       <div className="w-0 translate-x-[100%] pl-0 opacity-0 transition-all duration-200 group-hover:w-5 group-hover:translate-x-0 group-hover:pl-1 group-hover:opacity-100">
 8 |         <ArrowRightIcon className="h-5 w-5" />
 9 |       </div>
10 |     </button>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/components/buttons/BlackIcon6.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowRightIcon, StarFilledIcon } from "@radix-ui/react-icons";
 2 | 
 3 | export function BlackIcon6() {
 4 |   return (
 5 |     <button className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-neutral-950 px-6 font-medium text-neutral-200 duration-500">
 6 |       <div className="relative inline-flex -translate-x-0 items-center transition group-hover:-translate-x-6">
 7 |         <div className="absolute translate-x-0 opacity-100 transition group-hover:-translate-x-6 group-hover:opacity-0">
 8 |           <StarFilledIcon className="h-5 w-5" />
 9 |         </div>
10 |         <span className="pl-6">Hover</span>
11 |         <div className="absolute right-0 translate-x-12 opacity-0 transition group-hover:translate-x-6 group-hover:opacity-100">
12 |           <ArrowRightIcon className="h-5 w-5" />
13 |         </div>
14 |       </div>
15 |     </button>
16 |   );
17 | }
18 | 


--------------------------------------------------------------------------------
/components/buttons/BlackIcon7.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowRightIcon } from "@radix-ui/react-icons";
 2 | 
 3 | export function BlackIcon7() {
 4 |   return (
 5 |     <button className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-neutral-950 px-6 font-medium text-neutral-200">
 6 |       <span>Hover me</span>
 7 |       <div className="ml-1 transition duration-300 group-hover:rotate-[360deg]">
 8 |         <ArrowRightIcon className="h-5 w-5" />
 9 |       </div>
10 |     </button>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/components/buttons/BlackIcon8.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowRightIcon } from "@radix-ui/react-icons";
 2 | 
 3 | export function BlackIcon8() {
 4 |   return (
 5 |     <button className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-neutral-950 px-6 font-medium text-neutral-200">
 6 |       <span>Hover me</span>
 7 |       <div className="ml-1 transition group-hover:translate-x-1">
 8 |         <ArrowRightIcon className="h-5 w-5" />
 9 |       </div>
10 |     </button>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/components/buttons/BlackIcon9.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowTopRightIcon } from "@radix-ui/react-icons";
 2 | 
 3 | export function BlackIcon9() {
 4 |   return (
 5 |     <button className="group relative inline-flex h-12 items-center justify-center rounded-md bg-neutral-950 px-6 font-medium text-neutral-200">
 6 |       <span>Hover me</span>
 7 |       <div className="relative ml-1 h-5 w-5 overflow-hidden">
 8 |         <div className="absolute transition-all duration-200 group-hover:-translate-y-5 group-hover:translate-x-4">
 9 |           <ArrowTopRightIcon className="h-5 w-5" />
10 |           <ArrowTopRightIcon className="h-5 w-5 -translate-x-4" />
11 |         </div>
12 |       </div>
13 |     </button>
14 |   );
15 | }
16 | 


--------------------------------------------------------------------------------
/components/buttons/BlackLoading1.tsx:
--------------------------------------------------------------------------------
 1 | import { UpdateIcon } from "@radix-ui/react-icons";
 2 | 
 3 | export function BlackLoading1() {
 4 |   return (
 5 |     <button
 6 |       disabled
 7 |       className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-neutral-950 px-6 font-medium text-neutral-200 disabled:pointer-events-none disabled:opacity-50"
 8 |     >
 9 |       <UpdateIcon className="mr-1 h-5 w-5 animate-spin text-white" />
10 |       <span>Loading...</span>
11 |     </button>
12 |   );
13 | }
14 | 


--------------------------------------------------------------------------------
/components/buttons/BlackRound1.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowRightIcon, StarIcon } from "@radix-ui/react-icons";
 2 | 
 3 | export function BlackRound1() {
 4 |   return (
 5 |     <button className="group relative inline-flex h-12 w-12 items-center justify-center overflow-hidden rounded-full bg-neutral-950 font-medium text-neutral-200">
 6 |       <div className="translate-x-0 transition group-hover:translate-x-[300%]">
 7 |         <ArrowRightIcon className="h-5 w-5" />
 8 |       </div>
 9 |       <div className="absolute -translate-x-[300%] transition group-hover:translate-x-0">
10 |         <ArrowRightIcon className="h-5 w-5" />
11 |       </div>
12 |     </button>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/components/buttons/BlackRound2.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowRightIcon } from "@radix-ui/react-icons";
 2 | 
 3 | export function BlackRound2() {
 4 |   return (
 5 |     <button className="group relative inline-flex h-12 w-12 items-center justify-center overflow-hidden rounded-full bg-neutral-950">
 6 |       <div className="transition duration-300 group-hover:rotate-[360deg]">
 7 |         <ArrowRightIcon className="h-5 w-5 text-neutral-200" />
 8 |       </div>
 9 |     </button>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/components/buttons/BlackRound3.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowRightIcon } from "@radix-ui/react-icons";
 2 | 
 3 | export function BlackRound3() {
 4 |   return (
 5 |     <button className="group relative inline-flex h-12 w-12 items-center justify-center overflow-hidden rounded-full bg-neutral-950">
 6 |       <div className="-rotate-45 transition duration-300 group-hover:rotate-0">
 7 |         <ArrowRightIcon className="h-5 w-5 text-neutral-200" />
 8 |       </div>
 9 |     </button>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/components/buttons/BlackRound4.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowRightIcon } from "@radix-ui/react-icons";
 2 | 
 3 | export function BlackRound4() {
 4 |   return (
 5 |     <button className="group relative inline-flex h-12 w-12 items-center justify-center overflow-hidden rounded-full bg-neutral-950 font-medium text-neutral-200 transition-all duration-300 hover:w-32">
 6 |       <div className="inline-flex whitespace-nowrap opacity-0 transition-all duration-200 group-hover:-translate-x-3 group-hover:opacity-100">
 7 |         Hover me
 8 |       </div>
 9 |       <div className="absolute right-3.5">
10 |         <ArrowRightIcon className="h-5 w-5" />
11 |       </div>
12 |     </button>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/components/buttons/BlackSm1.tsx:
--------------------------------------------------------------------------------
1 | export function BlackSm1() {
2 |   return (
3 |     <button className="cursor-pointer rounded-md bg-neutral-950 px-3 py-1 text-sm text-white shadow-lg shadow-neutral-500/20 transition active:scale-[.95]">
4 |       Click me
5 |     </button>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/buttons/BlackSm2.tsx:
--------------------------------------------------------------------------------
1 | export function BlackSm2() {
2 |   return (
3 |     <button className="cursor-pointer rounded-[8px] bg-neutral-950 px-3 py-1 text-sm text-neutral-100 transition-colors hover:bg-neutral-800 active:bg-neutral-700">
4 |       Hover me
5 |     </button>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/buttons/BlackSmLoading1.tsx:
--------------------------------------------------------------------------------
 1 | export function BlackSmLoading1() {
 2 |   return (
 3 |     <button
 4 |       className="inline-flex cursor-pointer items-center rounded-[8px] bg-neutral-950 px-3 py-1 text-sm text-neutral-100 transition-colors hover:bg-neutral-800 active:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50"
 5 |       disabled
 6 |     >
 7 |       <div className="h-3 w-3 animate-spin rounded-full border-2 border-solid border-neutral-100 border-t-transparent" />
 8 |       <span className="ml-1">Loading...</span>
 9 |     </button>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/components/buttons/BlackSquare1.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowRightIcon } from "@radix-ui/react-icons";
 2 | 
 3 | export function BlackSquare1() {
 4 |   return (
 5 |     <button className="relative inline-flex h-12 w-12 items-center justify-center rounded-md bg-neutral-950 transition-colors  hover:bg-neutral-800">
 6 |       <div>
 7 |         <ArrowRightIcon className="h-5 w-5 text-neutral-200" />
 8 |       </div>
 9 |     </button>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/components/buttons/Blue1.tsx:
--------------------------------------------------------------------------------
1 | export function Blue1() {
2 |   return (
3 |     <button className="group relative h-12 overflow-hidden rounded-md bg-blue-500 px-6 text-neutral-50 transition">
4 |       <span>Hover me</span>
5 |       <div className="absolute inset-0 h-full w-0 bg-white/30 transition-[width] group-hover:w-full"></div>
6 |     </button>
7 |   );
8 | }
9 | 


--------------------------------------------------------------------------------
/components/buttons/Blue2.tsx:
--------------------------------------------------------------------------------
1 | export function Blue2() {
2 |   return (
3 |     <button className="relative z-0 h-12 rounded-full bg-blue-500 px-6 text-neutral-50 after:absolute after:left-0 after:top-0 after:-z-10 after:h-full after:w-full after:rounded-full after:bg-blue-500 hover:after:scale-x-125 hover:after:scale-y-150 hover:after:opacity-0 hover:after:transition hover:after:duration-500">
4 |       Hover me
5 |     </button>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/buttons/Blue3.tsx:
--------------------------------------------------------------------------------
1 | export function Blue3() {
2 |   return (
3 |     <button className="relative z-0 h-12 rounded-full bg-blue-500 px-6 text-neutral-50 after:absolute after:left-0 after:top-0 after:-z-10 after:h-full after:w-full after:rounded-full after:bg-blue-500 active:scale-95 active:transition active:after:scale-x-125 active:after:scale-y-150 active:after:opacity-0 active:after:transition active:after:duration-500">
4 |       Click me
5 |     </button>
6 |   );
7 | };
8 | 
9 | 


--------------------------------------------------------------------------------
/components/buttons/Blue4.tsx:
--------------------------------------------------------------------------------
 1 | export function Blue4() {
 2 |   return (
 3 |     <button className="group relative h-12 overflow-hidden rounded-md bg-blue-500 px-6 text-neutral-50 transition hover:bg-blue-600">
 4 |       <span className="relative">Hover me</span>
 5 |       <div className="animate-shine-infinite absolute inset-0 -top-[20px] flex h-[calc(100%+40px)] w-full justify-center blur-[12px]">
 6 |         <div className="relative h-full w-8 bg-white/30"></div>
 7 |       </div>
 8 |     </button>
 9 |   );
10 | }
11 | 
12 | /*
13 | tailwind.config
14 | 
15 | animation: {
16 |   ["shine-infinite"]: "shine-infinite 2s ease-in-out infinite",
17 | },
18 | keyframes: {
19 |   ["shine-infinite"]: {
20 |     "0%": {
21 |       transform: "skew(-12deg) translateX(-100%)",
22 |     },
23 |     "100%": {
24 |       transform: "skew(-12deg) translateX(100%)",
25 |     },
26 |   },
27 | },
28 | 
29 | */
30 | 


--------------------------------------------------------------------------------
/components/buttons/BlueLoading1.tsx:
--------------------------------------------------------------------------------
 1 | export function BlueLoading1() {
 2 |   return (
 3 |     <button
 4 |       className="inline-flex h-12 items-center rounded-lg bg-blue-500 px-6 text-neutral-50 disabled:pointer-events-none disabled:opacity-50 "
 5 |       disabled
 6 |     >
 7 |       <div className="h-4 w-4 animate-spin rounded-full border-2 border-solid border-white border-t-transparent" />
 8 |       <span className="ml-2">Loading... </span>
 9 |     </button>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/components/buttons/GreySm1.tsx:
--------------------------------------------------------------------------------
1 | export function GreySm1() {
2 |   return (
3 |     <button className="cursor-pointer rounded-[8px] bg-neutral-200 px-3 py-1 text-sm text-neutral-950 transition-colors hover:bg-neutral-100 active:bg-neutral-50">
4 |       Hover me
5 |     </button>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/buttons/Letters1.tsx:
--------------------------------------------------------------------------------
 1 | export function Letters1() {
 2 |   return (
 3 |     <button className="group relative h-12 overflow-hidden rounded-[8px] border border-neutral-200 bg-transparent px-4 text-neutral-950">
 4 |       <span className="relative inline-flex">
 5 |         <span className="duration-700 [transition-delay:0.02s] group-hover:[transform:rotateX(360deg)]">
 6 |           H
 7 |         </span>
 8 |         <span className="duration-700 [transition-delay:0.04s] group-hover:[transform:rotateX(360deg)]">
 9 |           o
10 |         </span>
11 |         <span className="duration-700 [transition-delay:0.06s] group-hover:[transform:rotateX(360deg)]">
12 |           v
13 |         </span>
14 |         <span className="duration-700 [transition-delay:0.08s] group-hover:[transform:rotateX(360deg)]">
15 |           e
16 |         </span>
17 |         <span className="duration-700 [transition-delay:0.10s] group-hover:[transform:rotateX(360deg)]">
18 |           r
19 |         </span>
20 |         <span className="duration-700 [transition-delay:0.12s] group-hover:[transform:rotateX(360deg)]">
21 |           &nbsp;
22 |         </span>
23 |         <span className="duration-700 [transition-delay:0.14s] group-hover:[transform:rotateX(360deg)]">
24 |           m
25 |         </span>
26 |         <span className="duration-700 [transition-delay:0.16s] group-hover:[transform:rotateX(360deg)]">
27 |           e
28 |         </span>
29 |       </span>
30 |     </button>
31 |   );
32 | }
33 | 


--------------------------------------------------------------------------------
/components/buttons/Letters2.tsx:
--------------------------------------------------------------------------------
 1 | export function Letters2() {
 2 |   return (
 3 |     <button className="group relative h-12 overflow-hidden rounded-[8px] border border-neutral-200 bg-transparent px-4 text-neutral-950">
 4 |       <span className="relative inline-flex">
 5 |         <span className="duration-700 [transition-delay:0.02s] group-hover:[transform:rotateY(360deg)]">
 6 |           H
 7 |         </span>
 8 |         <span className="duration-700 [transition-delay:0.04s] group-hover:[transform:rotateY(360deg)]">
 9 |           o
10 |         </span>
11 |         <span className="duration-700 [transition-delay:0.06s] group-hover:[transform:rotateY(360deg)]">
12 |           v
13 |         </span>
14 |         <span className="duration-700 [transition-delay:0.08s] group-hover:[transform:rotateY(360deg)]">
15 |           e
16 |         </span>
17 |         <span className="duration-700 [transition-delay:0.10s] group-hover:[transform:rotateY(360deg)]">
18 |           r
19 |         </span>
20 |         <span className="duration-700 [transition-delay:0.12s] group-hover:[transform:rotateY(360deg)]">
21 |           &nbsp;
22 |         </span>
23 |         <span className="duration-700 [transition-delay:0.14s] group-hover:[transform:rotateY(360deg)]">
24 |           m
25 |         </span>
26 |         <span className="duration-700 [transition-delay:0.16s] group-hover:[transform:rotateY(360deg)]">
27 |           e
28 |         </span>
29 |       </span>
30 |     </button>
31 |   );
32 | }
33 | 


--------------------------------------------------------------------------------
/components/buttons/Letters3.tsx:
--------------------------------------------------------------------------------
 1 | export function Letters3() {
 2 |   return (
 3 |     <button className="group relative h-12 rounded-full border border-neutral-200 bg-transparent px-4 text-neutral-950">
 4 |       <span className="relative inline-flex overflow-hidden">
 5 |         <div className="translate-y-0 skew-y-0 transition duration-500 group-hover:-translate-y-[110%] group-hover:skew-y-12">
 6 |           Hover me
 7 |         </div>
 8 |         <div className="absolute translate-y-[110%] skew-y-12 transition duration-500 group-hover:translate-y-0 group-hover:skew-y-0">
 9 |           Hover me
10 |         </div>
11 |       </span>
12 |     </button>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/components/buttons/Letters4.tsx:
--------------------------------------------------------------------------------
 1 | export function Letters4() {
 2 |   return (
 3 |     <button className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-full border border-neutral-200 bg-transparent px-4 text-neutral-950">
 4 |       <span className="relative inline-flex overflow-hidden">
 5 |         <div className="absolute origin-bottom transition duration-500 [transform:translateX(-150%)_skewX(33deg)] group-hover:[transform:translateX(0)_skewX(0deg)]">
 6 |           Hover me
 7 |         </div>
 8 |         <div className="transition duration-500 [transform:translateX(0%)_skewX(0deg)] group-hover:[transform:translateX(150%)_skewX(33deg)]">
 9 |           Hover me
10 |         </div>
11 |       </span>
12 |     </button>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/components/buttons/Link1.tsx:
--------------------------------------------------------------------------------
 1 | export function Link1() {
 2 |   return (
 3 |     <button
 4 |       role="link"
 5 |       className="relative after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:origin-bottom-left after:scale-x-100 after:bg-neutral-800 after:transition-transform after:duration-150 after:ease-in-out hover:after:origin-bottom-right hover:after:scale-x-0"
 6 |     >
 7 |       Hover me
 8 |     </button>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/components/buttons/Link2.tsx:
--------------------------------------------------------------------------------
 1 | export function Link2() {
 2 |   return (
 3 |     <button
 4 |       role="link"
 5 |       className="text-base decoration-2 underline-offset-4 transition-colors hover:underline"
 6 |     >
 7 |       Hover me
 8 |     </button>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/components/buttons/Link3.tsx:
--------------------------------------------------------------------------------
 1 | export function Link3() {
 2 |   return (
 3 |     <button
 4 |       role="link"
 5 |       className="relative after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:origin-bottom-right after:scale-x-0 after:bg-neutral-800 after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.65_0.05_0.36_1)] hover:after:origin-bottom-left hover:after:scale-x-100"
 6 |     >
 7 |       Hover me
 8 |     </button>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/components/buttons/Link4.tsx:
--------------------------------------------------------------------------------
 1 | export function Link4() {
 2 |   return (
 3 |     <button
 4 |       role="link"
 5 |       className="relative after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:translate-y-1 after:bg-neutral-800 after:opacity-0 after:transition after:duration-150   after:ease-in-out hover:after:translate-y-0 hover:after:opacity-100"
 6 |     >
 7 |       Hover me
 8 |     </button>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/components/buttons/Link5.tsx:
--------------------------------------------------------------------------------
 1 | export function Link5() {
 2 |   return (
 3 |     <button
 4 |       role="link"
 5 |       className="relative after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[2px] after:w-full after:origin-bottom after:scale-x-0 after:bg-neutral-800 after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.65_0.05_0.36_1)] hover:after:origin-bottom hover:after:scale-x-100"
 6 |     >
 7 |       Hover me
 8 |     </button>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/components/buttons/Link6.tsx:
--------------------------------------------------------------------------------
 1 | export function Link6() {
 2 |   return (
 3 |     <>
 4 |       <button
 5 |         role="link"
 6 |         className="relative bg-[linear-gradient(#262626,#262626),linear-gradient(#3b82f6,#3b82f6)] bg-[length:100%_2px,0_2px] bg-[position:100%_100%,0_100%] bg-no-repeat text-neutral-950 transition-[background-size] duration-300 hover:bg-[0_2px,100%_2px]"
 7 |       >
 8 |         Hover me
 9 |       </button>
10 |     </>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/components/buttons/Link7.tsx:
--------------------------------------------------------------------------------
 1 | export function Link7() {
 2 |   return (
 3 |     <>
 4 |       <button
 5 |         role="link"
 6 |         className="relative bg-[linear-gradient(#262626,#262626),linear-gradient(#3b82f6,#3b82f6)] bg-[length:100%_2px,0_2px] bg-[position:100%_100%,0_100%] bg-no-repeat text-neutral-950 transition-[background-size,color] duration-500 hover:bg-[0_2px,100%_2px] hover:text-[#3b82f6]"
 7 |       >
 8 |         Hover me
 9 |       </button>
10 |     </>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/components/buttons/Link8.tsx:
--------------------------------------------------------------------------------
 1 | export function Link8() {
 2 |   return (
 3 |     <button
 4 |       role="link"
 5 |       className="relative underline decoration-wavy underline-offset-4 transition-colors duration-300 hover:text-blue-500 hover:underline"
 6 |     >
 7 |       Hover me
 8 |     </button>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/components/buttons/Outline1.tsx:
--------------------------------------------------------------------------------
1 | export function Outline1() {
2 |   return (
3 |     <button className="relative h-12 overflow-hidden rounded-md border border-neutral-200 bg-transparent px-6 text-neutral-950 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-full before:-translate-y-full before:bg-neutral-100 before:transition-transform hover:before:translate-y-0">
4 |       <span className="relative">Hover me</span>
5 |     </button>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/buttons/Outline2.tsx:
--------------------------------------------------------------------------------
1 | export function Outline2() {
2 |   return (
3 |     <button className="relative h-12 overflow-hidden rounded-md border border-neutral-200 bg-transparent px-6 text-neutral-950 before:absolute before:bottom-0 before:left-0 before:block before:h-full before:w-full before:translate-y-full before:bg-neutral-100 before:transition-transform hover:before:translate-y-0">
4 |       <span className="relative">Hover me</span>
5 |     </button>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/buttons/Outline3.tsx:
--------------------------------------------------------------------------------
1 | export function Outline3() {
2 |   return (
3 |     <button className="relative h-12 overflow-hidden rounded-md border border-neutral-200 bg-transparent px-6 text-neutral-950 before:absolute before:bottom-0 before:left-0 before:block before:h-full before:w-full before:-translate-x-full before:bg-neutral-100 before:transition-transform hover:before:translate-x-0">
4 |       <span className="relative">Hover me</span>
5 |     </button>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/buttons/Outline4.tsx:
--------------------------------------------------------------------------------
1 | export function Outline4() {
2 |   return (
3 |     <button className="relative h-12 overflow-hidden rounded-md border border-neutral-200 bg-transparent px-6 text-neutral-950 before:absolute before:bottom-0 before:left-0 before:block before:h-full before:w-full before:translate-x-full before:bg-neutral-100 before:transition-transform hover:before:translate-x-0">
4 |       <span className="relative">Hover me</span>
5 |     </button>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/buttons/Shadow1.tsx:
--------------------------------------------------------------------------------
1 | export function Shadow1() {
2 |   return (
3 |     <button className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md border border-neutral-200 bg-transparent px-6 font-medium text-neutral-600 transition-all duration-100 [box-shadow:5px_5px_rgb(82_82_82)] active:translate-x-[3px] active:translate-y-[3px] active:[box-shadow:0px_0px_rgb(82_82_82)]">
4 |       Click me
5 |     </button>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/buttons/Shadow2.tsx:
--------------------------------------------------------------------------------
1 | export function Shadow2() {
2 |   return (
3 |     <button className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md border border-neutral-200 bg-transparent px-6 font-medium text-neutral-600 transition-all duration-100 [box-shadow:5px_5px_rgb(82_82_82)] hover:translate-x-[3px] hover:translate-y-[3px] hover:[box-shadow:0px_0px_rgb(82_82_82)]">
4 |       Hover me
5 |     </button>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/buttons/Shadow3.tsx:
--------------------------------------------------------------------------------
 1 | export function Shadow3() {
 2 |   return (
 3 |     <button className="group relative">
 4 |       <div className="relative z-10 inline-flex h-12 items-center justify-center overflow-hidden rounded-md border border-neutral-200 bg-transparent px-6 font-medium text-neutral-600 transition-all duration-300 group-hover:-translate-x-3 group-hover:-translate-y-3">
 5 |         Hover me
 6 |       </div>
 7 |       <div className="absolute inset-0 z-0 h-full w-full rounded-md transition-all duration-300 group-hover:-translate-x-3 group-hover:-translate-y-3 group-hover:[box-shadow:5px_5px_#a3a3a3,10px_10px_#d4d4d4,15px_15px_#e5e5e5]"></div>
 8 |     </button>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/components/buttons/Shadow4.tsx:
--------------------------------------------------------------------------------
 1 | export function Shadow4() {
 2 |   return (
 3 |     <button className="group relative">
 4 |       <div className="relative z-10 inline-flex h-12 items-center justify-center overflow-hidden rounded-md border border-neutral-200 bg-transparent px-6 font-medium text-neutral-600 transition-all duration-300 group-hover:-translate-x-3 group-hover:-translate-y-3 group-active:translate-x-0 group-active:translate-y-0">
 5 |         Hover me
 6 |       </div>
 7 |       <div className="absolute inset-0 z-0 h-full w-full rounded-md transition-all duration-300 group-hover:-translate-x-3 group-hover:-translate-y-3 group-hover:[box-shadow:5px_5px_#a3a3a3,10px_10px_#d4d4d4,15px_15px_#e5e5e5] group-active:translate-x-0 group-active:translate-y-0 group-active:shadow-none"></div>
 8 |     </button>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/components/buttons/Shadow5.tsx:
--------------------------------------------------------------------------------
1 | export function Shadow5() {
2 |   return (
3 |     <button className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md border border-neutral-200 bg-transparent px-6 font-medium text-neutral-600 transition-all [box-shadow:0px_4px_1px_#a3a3a3] active:translate-y-[2px] active:shadow-none">
4 |       Click me
5 |     </button>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/buttons/SquareOutline1.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowRightIcon } from "@radix-ui/react-icons";
 2 | 
 3 | export function SquareOutline1() {
 4 |   return (
 5 |     <button className="relative inline-flex h-12 w-12 items-center justify-center rounded-md border border-neutral-300 bg-transparent transition-colors hover:bg-neutral-200">
 6 |       <ArrowRightIcon className="h-5 w-5 text-neutral-600" />
 7 |     </button>
 8 |   );
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/buttons/SubtleSkeuomorphic1.tsx:
--------------------------------------------------------------------------------
 1 | export function SubtleSkeuomorphic1() {
 2 |   return (
 3 |     <button className="group h-8 select-none rounded-lg bg-gradient-to-b from-zinc-800 via-zinc-700 to-zinc-600 px-3 text-sm leading-8 text-zinc-50 shadow-[0_-1px_0_1px_rgba(0,0,0,0.8)_inset,0_0_0_1px_rgb(9_9_11)_inset,0_0.5px_0_1.5px_#71717a_inset] hover:bg-gradient-to-b hover:from-zinc-900 hover:via-zinc-900 hover:to-zinc-700 active:shadow-[0_3px_0_0_rgba(0,0,0)_inset]">
 4 |       <span className="block group-active:[transform:translate3d(0,1px,0)]">
 5 |         Click me
 6 |       </span>
 7 |     </button>
 8 |   );
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/buttons/SubtleSkeuomorphic10.tsx:
--------------------------------------------------------------------------------
 1 | export function SubtleSkeuomorphic10() {
 2 |   return (
 3 |     <button className="group flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gradient-to-b from-gray-50 via-gray-50 to-gray-200 px-4 text-gray-950 hover:bg-gradient-to-b hover:from-gray-100 hover:via-gray-100 hover:to-gray-100 active:shadow-inner">
 4 |       <span className="block group-active:[transform:translate3d(0,1px,0)]">
 5 |         Hover me
 6 |       </span>
 7 |     </button>
 8 |   );
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/buttons/SubtleSkeuomorphic11.tsx:
--------------------------------------------------------------------------------
 1 | export function SubtleSkeuomorphic11() {
 2 |   return (
 3 |     <button className="group flex h-10 items-center justify-center rounded-md border border-pink-200 bg-gradient-to-b from-pink-50 via-pink-100 to-pink-50 px-4 text-pink-900 hover:bg-gradient-to-b hover:from-pink-100 hover:via-pink-100 hover:to-pink-100 active:shadow-inner">
 4 |       <span className="block group-active:[transform:translate3d(0,1px,0)]">
 5 |         Hover me
 6 |       </span>
 7 |     </button>
 8 |   );
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/buttons/SubtleSkeuomorphic12.tsx:
--------------------------------------------------------------------------------
1 | export function SubtleSkeuomorphic12() {
2 |   return (
3 |     <button className="flex h-9 items-center justify-center rounded-md bg-gradient-to-b from-pink-400/80 from-50% to-pink-500/80 to-50% px-3 text-pink-50 hover:from-pink-400 hover:to-pink-500 active:from-pink-500 active:to-pink-600">
4 |       Hover me
5 |     </button>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/buttons/SubtleSkeuomorphic13.tsx:
--------------------------------------------------------------------------------
1 | export function SubtleSkeuomorphic13() {
2 |   return (
3 |     <button className="flex h-9 items-center justify-center rounded-full bg-gradient-to-b from-blue-400 from-50% to-blue-500 to-50% px-3 text-blue-50 hover:from-blue-500 hover:to-blue-600 active:from-blue-600 active:to-blue-700">
4 |       Hover me
5 |     </button>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/buttons/SubtleSkeuomorphic14.tsx:
--------------------------------------------------------------------------------
1 | export function SubtleSkeuomorphic14() {
2 |   return (
3 |     <button className="flex h-9 items-center justify-center rounded-full bg-gradient-to-b from-gray-50 from-50% to-gray-100 to-50% px-3 text-gray-900 shadow hover:from-gray-100 hover:to-gray-200 active:shadow-none">
4 |       Hover me
5 |     </button>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/buttons/SubtleSkeuomorphic15.tsx:
--------------------------------------------------------------------------------
1 | export function SubtleSkeuomorphic15() {
2 |   return (
3 |     <button className="flex h-9 items-center justify-center bg-gradient-to-b from-gray-900 from-50% to-gray-800 to-50% px-3 text-gray-50 shadow hover:from-gray-800 hover:to-gray-700 active:from-gray-700 active:to-gray-600">
4 |       Hover me
5 |     </button>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/buttons/SubtleSkeuomorphic16.tsx:
--------------------------------------------------------------------------------
 1 | export function SubtleSkeuomorphic16() {
 2 |   return (
 3 |     <button className="group h-10 select-none rounded-[4px] bg-orange-600 px-4 leading-10 text-zinc-50 shadow-[0_-1px_0_1px_#7c2d12_inset,0_0_0_1px_#c2410c_inset,0_0.5px_0_1.5px_#fb923c_inset] hover:bg-orange-700 active:bg-orange-800 active:shadow-[-1px_0px_1px_0px_rgba(0,0,0,.2)_inset,1px_0px_1px_0px_rgba(0,0,0,.2)_inset,0px_0.125rem_0px_0px_rgba(0,0,0,.2)_inset]">
 4 |       <span className="block group-active:[transform:translate3d(0,1px,0)]">
 5 |         Click me
 6 |       </span>
 7 |     </button>
 8 |   );
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/buttons/SubtleSkeuomorphic17.tsx:
--------------------------------------------------------------------------------
 1 | import { PlusIcon } from "@radix-ui/react-icons";
 2 | 
 3 | export function SubtleSkeuomorphic17() {
 4 |   return (
 5 |     <button
 6 |       className="group flex h-10 w-10 select-none items-center justify-center rounded-lg border border-zinc-100 bg-white leading-8 text-zinc-950 shadow-[0_-1px_0_0px_#d4d4d8_inset,0_0_0_1px_#f4f4f5_inset,0_0.5px_0_1.5px_#fff_inset] hover:bg-zinc-50 hover:via-zinc-900 hover:to-zinc-800 active:shadow-[-1px_0px_1px_0px_#e4e4e7_inset,1px_0px_1px_0px_#e4e4e7_inset,0px_0.125rem_1px_0px_#d4d4d8_inset]"
 7 |       aria-label="Change language"
 8 |     >
 9 |       <span className="flex items-center group-active:[transform:translate3d(0,1px,0)]">
10 |         <PlusIcon className="h-4 w-4 text-zinc-950" />
11 |       </span>
12 |     </button>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/components/buttons/SubtleSkeuomorphic2.tsx:
--------------------------------------------------------------------------------
 1 | export function SubtleSkeuomorphic2() {
 2 |   return (
 3 |     <button className="group h-8 select-none rounded-lg bg-white px-3 text-sm leading-8 text-zinc-950 shadow-[0_-1px_0_0px_#d4d4d8_inset,0_0_0_1px_#f4f4f5_inset,0_0.5px_0_1.5px_#fff_inset] hover:bg-zinc-50 hover:via-zinc-900 hover:to-zinc-800 active:shadow-[-1px_0px_1px_0px_#e4e4e7_inset,1px_0px_1px_0px_#e4e4e7_inset,0px_0.125rem_1px_0px_#d4d4d8_inset]">
 4 |       <span className="block group-active:[transform:translate3d(0,1px,0)]">
 5 |         Click me
 6 |       </span>
 7 |     </button>
 8 |   );
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/buttons/SubtleSkeuomorphic3.tsx:
--------------------------------------------------------------------------------
 1 | import { GlobeIcon } from "@radix-ui/react-icons";
 2 | 
 3 | export function SubtleSkeuomorphic3() {
 4 |   return (
 5 |     <button
 6 |       className="group flex h-8 w-8 select-none items-center justify-center rounded-lg bg-white leading-8 text-zinc-950 shadow-[0_-1px_0_0px_#d4d4d8_inset,0_0_0_1px_#f4f4f5_inset,0_0.5px_0_1.5px_#fff_inset] hover:bg-zinc-50 hover:via-zinc-900 hover:to-zinc-800 active:shadow-[-1px_0px_1px_0px_#e4e4e7_inset,1px_0px_1px_0px_#e4e4e7_inset,0px_0.125rem_1px_0px_#d4d4d8_inset]"
 7 |       aria-label="Change language"
 8 |     >
 9 |       <span className="flex items-center group-active:[transform:translate3d(0,1px,0)]">
10 |         <GlobeIcon className="inline-block h-4 w-4 text-zinc-800" />
11 |       </span>
12 |     </button>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/components/buttons/SubtleSkeuomorphic4.tsx:
--------------------------------------------------------------------------------
 1 | export function SubtleSkeuomorphic4() {
 2 |   return (
 3 |     <button className="group h-8 select-none rounded-lg bg-red-600 px-3 text-sm leading-8 text-zinc-50 shadow-[0_-1px_0_1px_#7f1d1d_inset,0_0_0_1px_#b91c1c_inset,0_0.5px_0_1.5px_#f87171_inset] hover:bg-red-700 active:bg-red-800 active:shadow-[-1px_0px_1px_0px_rgba(0,0,0,.2)_inset,1px_0px_1px_0px_rgba(0,0,0,.2)_inset,0px_0.125rem_0px_0px_rgba(0,0,0,.6)_inset]">
 4 |       <span className="block group-active:[transform:translate3d(0,1px,0)]">
 5 |         Click me
 6 |       </span>
 7 |     </button>
 8 |   );
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/buttons/SubtleSkeuomorphic5.tsx:
--------------------------------------------------------------------------------
 1 | export function SubtleSkeuomorphic5() {
 2 |   return (
 3 |     <button className="group h-8 select-none rounded-lg bg-blue-600 px-3 text-sm leading-8 text-zinc-50 shadow-[0_-1px_0_1px_#1e3a8a_inset,0_0_0_1px_#1d4ed8_inset,0_0.5px_0_1.5px_#60a5fa_inset] hover:bg-blue-700 active:bg-blue-800 active:shadow-[-1px_0px_1px_0px_rgba(0,0,0,.2)_inset,1px_0px_1px_0px_rgba(0,0,0,.2)_inset,0px_0.125rem_0px_0px_rgba(0,0,0,.6)_inset]">
 4 |       <span className="block group-active:[transform:translate3d(0,1px,0)]">
 5 |         Click me
 6 |       </span>
 7 |     </button>
 8 |   );
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/buttons/SubtleSkeuomorphic6.tsx:
--------------------------------------------------------------------------------
 1 | export function SubtleSkeuomorphic6() {
 2 |   return (
 3 |     <button className="group flex h-10 items-center justify-center rounded-md border border-orange-600 bg-gradient-to-b from-orange-400 via-orange-500 to-orange-600 px-4 text-neutral-50 shadow-[inset_0_1px_0px_0px_#fdba74] active:[box-shadow:none]">
 4 |       <span className="block group-active:[transform:translate3d(0,1px,0)]">
 5 |         Click me
 6 |       </span>
 7 |     </button>
 8 |   );
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/buttons/SubtleSkeuomorphic7.tsx:
--------------------------------------------------------------------------------
 1 | export function SubtleSkeuomorphic7() {
 2 |   return (
 3 |     <button className="group flex h-10 items-center justify-center rounded-md border border-blue-600 bg-gradient-to-b from-blue-400 via-blue-500 to-blue-600 px-4 text-neutral-50 shadow-[inset_0_1px_0px_0px_#93c5fd] hover:from-blue-600 hover:via-blue-600 hover:to-blue-600 active:[box-shadow:none]">
 4 |       <span className="block group-active:[transform:translate3d(0,1px,0)]">
 5 |         Hover me
 6 |       </span>
 7 |     </button>
 8 |   );
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/buttons/SubtleSkeuomorphic8.tsx:
--------------------------------------------------------------------------------
 1 | export function SubtleSkeuomorphic8() {
 2 |   return (
 3 |     <button className="group flex h-10 items-center justify-center rounded-md border border-teal-600 bg-gradient-to-b from-teal-400 via-teal-500 to-teal-600 px-4 text-neutral-50 shadow-[inset_0_1px_0px_0px_#5eead4] hover:bg-gradient-to-b hover:from-teal-600 hover:via-teal-600 hover:to-teal-600 active:[box-shadow:none]">
 4 |       <span className="block group-active:[transform:translate3d(0,1px,0)]">
 5 |         Hover me
 6 |       </span>
 7 |     </button>
 8 |   );
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/buttons/SubtleSkeuomorphic9.tsx:
--------------------------------------------------------------------------------
 1 | export function SubtleSkeuomorphic9() {
 2 |   return (
 3 |     <button className="group flex h-10 items-center justify-center rounded-md border border-gray-600 bg-gradient-to-b from-gray-400 via-gray-500 to-gray-600 px-4 text-neutral-50 shadow-[inset_0_1px_0px_0px_#d1d5db] hover:bg-gradient-to-b hover:from-gray-600 hover:via-gray-600 hover:to-gray-600 active:[box-shadow:none]">
 4 |       <span className="block group-active:[transform:translate3d(0,1px,0)]">
 5 |         Hover me
 6 |       </span>
 7 |     </button>
 8 |   );
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/buttons/White1.tsx:
--------------------------------------------------------------------------------
 1 | export function White1() {
 2 |   return (
 3 |     <button className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md border border-neutral-200 font-medium">
 4 |       <div className="inline-flex h-12 translate-y-0 items-center justify-center bg-white px-6 text-neutral-950 transition group-hover:-translate-y-[150%]">
 5 |         Hover me
 6 |       </div>
 7 |       <div className="absolute inline-flex h-12 w-full translate-y-[100%] items-center justify-center bg-blue-500 px-6 text-neutral-50 transition duration-300 group-hover:translate-y-0">
 8 |         Hover me
 9 |       </div>
10 |     </button>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/components/buttons/White2.tsx:
--------------------------------------------------------------------------------
 1 | export function White2() {
 2 |   return (
 3 |     <button className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md border border-neutral-200 font-medium">
 4 |       <div className="inline-flex h-12 translate-x-0 items-center justify-center bg-white px-6 text-neutral-950 transition group-hover:-translate-x-[150%]">
 5 |         Hover me
 6 |       </div>
 7 |       <div className="absolute inline-flex h-12 w-full translate-x-[100%] items-center justify-center bg-blue-500 px-6 text-neutral-50 transition duration-300 group-hover:translate-x-0">
 8 |         Hover me
 9 |       </div>
10 |     </button>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/components/buttons/White3.tsx:
--------------------------------------------------------------------------------
 1 | import { UpdateIcon } from "@radix-ui/react-icons";
 2 | 
 3 | export function White3() {
 4 |   return (
 5 |     <button className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md border border-neutral-200 bg-white font-medium">
 6 |       <div className="inline-flex h-12 translate-y-0 items-center justify-center px-6 text-neutral-950 transition duration-500 group-hover:-translate-y-[150%]">
 7 |         Hover me
 8 |       </div>
 9 |       <div className="absolute inline-flex h-12 w-full translate-y-[100%] items-center justify-center text-neutral-50 transition duration-500 group-hover:translate-y-0">
10 |         <span className="absolute h-full w-full translate-y-full skew-y-12 scale-y-0 bg-blue-500 transition duration-500 group-hover:translate-y-0 group-hover:scale-150"></span>
11 |         <span className="z-10">Hover me</span>
12 |       </div>
13 |     </button>
14 |   );
15 | }
16 | 


--------------------------------------------------------------------------------
/data/buttons.ts:
--------------------------------------------------------------------------------
  1 | import { Black1 } from "@/components/buttons/Black1";
  2 | import { Black10 } from "@/components/buttons/Black10";
  3 | import { Black11 } from "@/components/buttons/Black11";
  4 | import { Black12 } from "@/components/buttons/Black12";
  5 | import { Black13 } from "@/components/buttons/Black13";
  6 | import { Black14 } from "@/components/buttons/Black14";
  7 | import { Black2 } from "@/components/buttons/Black2";
  8 | import { Black3 } from "@/components/buttons/Black3";
  9 | import { Black4 } from "@/components/buttons/Black4";
 10 | import { Black5 } from "@/components/buttons/Black5";
 11 | import { Black6 } from "@/components/buttons/Black6";
 12 | import { Black7 } from "@/components/buttons/Black7";
 13 | import { Black8 } from "@/components/buttons/Black8";
 14 | import { Black9 } from "@/components/buttons/Black9";
 15 | import { BlackIcon1 } from "@/components/buttons/BlackIcon1";
 16 | import { BlackIcon2 } from "@/components/buttons/BlackIcon2";
 17 | import { BlackIcon3 } from "@/components/buttons/BlackIcon3";
 18 | import { BlackIcon4 } from "@/components/buttons/BlackIcon4";
 19 | import { BlackIcon5 } from "@/components/buttons/BlackIcon5";
 20 | import { BlackIcon6 } from "@/components/buttons/BlackIcon6";
 21 | import { BlackIcon7 } from "@/components/buttons/BlackIcon7";
 22 | import { BlackIcon8 } from "@/components/buttons/BlackIcon8";
 23 | import { BlackIcon9 } from "@/components/buttons/BlackIcon9";
 24 | import { BlackIcon10 } from "@/components/buttons/BlackIcon10";
 25 | import { BlackIcon11 } from "@/components/buttons/BlackIcon11";
 26 | import { BlackLoading1 } from "@/components/buttons/BlackLoading1";
 27 | import { BlackRound1 } from "@/components/buttons/BlackRound1";
 28 | import { BlackRound2 } from "@/components/buttons/BlackRound2";
 29 | import { BlackRound3 } from "@/components/buttons/BlackRound3";
 30 | import { BlackRound4 } from "@/components/buttons/BlackRound4";
 31 | import { BlackSm1 } from "@/components/buttons/BlackSm1";
 32 | import { BlackSm2 } from "@/components/buttons/BlackSm2";
 33 | import { BlackSmLoading1 } from "@/components/buttons/BlackSmLoading1";
 34 | import { BlackSquare1 } from "@/components/buttons/BlackSquare1";
 35 | import { Blue1 } from "@/components/buttons/Blue1";
 36 | import { Blue2 } from "@/components/buttons/Blue2";
 37 | import { Blue3 } from "@/components/buttons/Blue3";
 38 | import { Blue4 } from "@/components/buttons/Blue4";
 39 | import { BlueLoading1 } from "@/components/buttons/BlueLoading1";
 40 | import { GreySm1 } from "@/components/buttons/GreySm1";
 41 | import { Outline1 } from "@/components/buttons/Outline1";
 42 | import { Outline2 } from "@/components/buttons/Outline2";
 43 | import { Outline3 } from "@/components/buttons/Outline3";
 44 | import { Outline4 } from "@/components/buttons/Outline4";
 45 | import { Shadow1 } from "@/components/buttons/Shadow1";
 46 | import { Shadow2 } from "@/components/buttons/Shadow2";
 47 | import { Shadow3 } from "@/components/buttons/Shadow3";
 48 | import { Shadow4 } from "@/components/buttons/Shadow4";
 49 | import { Shadow5 } from "@/components/buttons/Shadow5";
 50 | import { SquareOutline1 } from "@/components/buttons/SquareOutline1";
 51 | import { White1 } from "@/components/buttons/White1";
 52 | import { White2 } from "@/components/buttons/White2";
 53 | import { White3 } from "@/components/buttons/White3";
 54 | import { Letters1 } from "@/components/buttons/Letters1";
 55 | import { Letters2 } from "@/components/buttons/Letters2";
 56 | import { Letters3 } from "@/components/buttons/Letters3";
 57 | import { Letters4 } from "@/components/buttons/Letters4";
 58 | import { Link1 } from "@/components/buttons/Link1";
 59 | import { Link2 } from "@/components/buttons/Link2";
 60 | import { Link3 } from "@/components/buttons/Link3";
 61 | import { Link4 } from "@/components/buttons/Link4";
 62 | import { Link5 } from "@/components/buttons/Link5";
 63 | import { Link6 } from "@/components/buttons/Link6";
 64 | import { Link7 } from "@/components/buttons/Link7";
 65 | import { Link8 } from "@/components/buttons/Link8";
 66 | import { SubtleSkeuomorphic1 } from "@/components/buttons/SubtleSkeuomorphic1";
 67 | import { SubtleSkeuomorphic2 } from "@/components/buttons/SubtleSkeuomorphic2";
 68 | import { SubtleSkeuomorphic3 } from "@/components/buttons/SubtleSkeuomorphic3";
 69 | import { SubtleSkeuomorphic4 } from "@/components/buttons/SubtleSkeuomorphic4";
 70 | import { SubtleSkeuomorphic5 } from "@/components/buttons/SubtleSkeuomorphic5";
 71 | import { SubtleSkeuomorphic6 } from "@/components/buttons/SubtleSkeuomorphic6";
 72 | import { SubtleSkeuomorphic7 } from "@/components/buttons/SubtleSkeuomorphic7";
 73 | import { SubtleSkeuomorphic8 } from "@/components/buttons/SubtleSkeuomorphic8";
 74 | import { SubtleSkeuomorphic9 } from "@/components/buttons/SubtleSkeuomorphic9";
 75 | import { SubtleSkeuomorphic10 } from "@/components/buttons/SubtleSkeuomorphic10";
 76 | import { SubtleSkeuomorphic11 } from "@/components/buttons/SubtleSkeuomorphic11";
 77 | import { SubtleSkeuomorphic12 } from "@/components/buttons/SubtleSkeuomorphic12";
 78 | import { SubtleSkeuomorphic13 } from "@/components/buttons/SubtleSkeuomorphic13";
 79 | import { SubtleSkeuomorphic14 } from "@/components/buttons/SubtleSkeuomorphic14";
 80 | import { SubtleSkeuomorphic15 } from "@/components/buttons/SubtleSkeuomorphic15";
 81 | import { SubtleSkeuomorphic17 } from "@/components/buttons/SubtleSkeuomorphic17";
 82 | import { SubtleSkeuomorphic16 } from "@/components/buttons/SubtleSkeuomorphic16";
 83 | 
 84 | export const BUTTONS = [
 85 |   Black1,
 86 |   Black2,
 87 |   Black3,
 88 |   Black4,
 89 |   Black5,
 90 |   Black6,
 91 |   Black7,
 92 |   Black8,
 93 |   Black9,
 94 |   Black10,
 95 |   Black11,
 96 |   Black12,
 97 |   Black13,
 98 |   Black14,
 99 |   BlackLoading1,
100 |   BlackIcon1,
101 |   BlackIcon2,
102 |   BlackIcon3,
103 |   BlackIcon4,
104 |   BlackIcon5,
105 |   BlackIcon6,
106 |   BlackIcon7,
107 |   BlackIcon8,
108 |   BlackIcon9,
109 |   BlackIcon10,
110 |   BlackIcon11,
111 |   BlackSm1,
112 |   BlackSm2,
113 |   BlackSmLoading1,
114 |   GreySm1,
115 |   Outline1,
116 |   Outline2,
117 |   Outline3,
118 |   Outline4,
119 |   Blue1,
120 |   Blue2,
121 |   Blue3,
122 |   Blue4,
123 |   BlueLoading1,
124 |   BlackRound1,
125 |   BlackRound2,
126 |   BlackRound3,
127 |   BlackRound4,
128 |   BlackSquare1,
129 |   SquareOutline1,
130 |   White1,
131 |   White2,
132 |   White3,
133 |   Shadow1,
134 |   Shadow2,
135 |   Shadow3,
136 |   Shadow4,
137 |   Shadow5,
138 |   Letters1,
139 |   Letters2,
140 |   Letters3,
141 |   Letters4,
142 |   Link1,
143 |   Link2,
144 |   Link3,
145 |   Link4,
146 |   Link5,
147 |   Link6,
148 |   Link7,
149 |   Link8,
150 |   SubtleSkeuomorphic1,
151 |   SubtleSkeuomorphic2,
152 |   SubtleSkeuomorphic3,
153 |   SubtleSkeuomorphic4,
154 |   SubtleSkeuomorphic5,
155 |   SubtleSkeuomorphic6,
156 |   SubtleSkeuomorphic7,
157 |   SubtleSkeuomorphic8,
158 |   SubtleSkeuomorphic9,
159 |   SubtleSkeuomorphic10,
160 |   SubtleSkeuomorphic11,
161 |   SubtleSkeuomorphic12,
162 |   SubtleSkeuomorphic13,
163 |   SubtleSkeuomorphic14,
164 |   SubtleSkeuomorphic15,
165 |   SubtleSkeuomorphic16,
166 |   SubtleSkeuomorphic17,
167 | ];
168 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs));
6 | }
7 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {}
3 | 
4 | module.exports = nextConfig
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "buttons",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@radix-ui/react-icons": "^1.3.0",
13 |     "class-variance-authority": "^0.7.0",
14 |     "clsx": "^2.1.0",
15 |     "next": "14.0.4",
16 |     "react": "^18",
17 |     "react-dom": "^18",
18 |     "sonner": "^1.3.1",
19 |     "tailwind-merge": "^2.2.0"
20 |   },
21 |   "devDependencies": {
22 |     "@types/node": "^20",
23 |     "@types/react": "^18",
24 |     "@types/react-dom": "^18",
25 |     "autoprefixer": "^10.0.1",
26 |     "eslint": "^8",
27 |     "eslint-config-next": "14.0.4",
28 |     "postcss": "^8",
29 |     "prettier": "^3.1.1",
30 |     "prettier-plugin-tailwindcss": "^0.5.9",
31 |     "tailwindcss": "^3.3.0",
32 |     "typescript": "^5"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibelick/buttons/03d7a89e614c1b16a8af4b65f2ccd3e8ca07b866/public/cover.png


--------------------------------------------------------------------------------
/public/opengraph-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibelick/buttons/03d7a89e614c1b16a8af4b65f2ccd3e8ca07b866/public/opengraph-image.jpg


--------------------------------------------------------------------------------
/screens/home.tsx:
--------------------------------------------------------------------------------
 1 | import { ButtonIcon, StarIcon } from "@radix-ui/react-icons";
 2 | import { BUTTONS } from "@/data/buttons";
 3 | import { CardComponent } from "@/components/app/card-component";
 4 | 
 5 | const ButtonGithubStar = () => {
 6 |   return (
 7 |     <a
 8 |       href="https://github.com/ibelick/buttons"
 9 |       target="_blank"
10 |       className="group relative inline-flex cursor-pointer items-center rounded-md bg-neutral-950 px-3 py-1 text-sm text-white shadow-lg shadow-neutral-500/20 transition active:scale-[.95]
11 |     "
12 |     >
13 |       <StarIcon className="h-4 w-4" />
14 |       <span className="ml-1">Star</span>
15 |       <div className="absolute inset-0 flex h-full w-full justify-center [transform:skew(-12deg)_translateX(-100%)] group-hover:duration-1000 group-hover:[transform:skew(-12deg)_translateX(100%)]">
16 |         <div className="relative h-full w-8 bg-white/20"></div>
17 |       </div>
18 |     </a>
19 |   );
20 | };
21 | 
22 | export const Home = () => {
23 |   return (
24 |     <div className="relative mx-auto min-h-screen w-full max-w-screen-lg border-l-neutral-50 border-r-neutral-50 px-2 pb-12 sm:border-l sm:border-r md:px-6">
25 |       <main>
26 |         <section className="pt-8">
27 |           <div className="flex flex-col items-start">
28 |             <div className="mb-6 flex w-full items-center justify-between">
29 |               <div className="rounded-full bg-neutral-950 px-2">
30 |                 <ButtonIcon className="h-4 w-4 text-white" />
31 |               </div>
32 |               <ButtonGithubStar />
33 |             </div>
34 |             <div className="mb-6">
35 |               <h1 className="mb-1 text-xl font-medium text-neutral-900">
36 |                 buttons.ibelick
37 |               </h1>
38 |               <div className="text-neutral-800">
39 |                 <p>
40 |                   {`Discover a collection of Tailwind CSS buttons designed to enhance your
41 |                   website's look.`}
42 |                 </p>
43 |                 <p>Easy to integrate with a copy-paste, no js</p>
44 |               </div>
45 |             </div>
46 |           </div>
47 |         </section>
48 |         <section className="mx-auto">
49 |           <div className="grid grid-cols-2 gap-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
50 |             {BUTTONS?.map((Comp) => {
51 |               return (
52 |                 <CardComponent key={Comp.name}>
53 |                   <Comp />
54 |                 </CardComponent>
55 |               );
56 |             })}
57 |           </div>
58 |         </section>
59 |       </main>
60 |       <footer>
61 |         <div className="mb-4 mt-8 ">
62 |           <span className="inline-flex text-sm text-neutral-900">
63 |             Made by{" "}
64 |             <a
65 |               href="https://twitter.com/ibelick"
66 |               className="ml-1 inline-flex hover:underline"
67 |             >
68 |               ibelick
69 |             </a>
70 |           </span>
71 |         </div>
72 |       </footer>
73 |       <div
74 |         className="pointer-events-none fixed bottom-0 left-0 h-24 w-full bg-red-50"
75 |         style={{
76 |           background: "linear-gradient(to bottom,transparent, #fff 10%)",
77 |           maskImage: "linear-gradient(to top, #fff 10%,transparent)",
78 |           backdropFilter: "blur(1px)",
79 |         }}
80 |       />
81 |     </div>
82 |   );
83 | };
84 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | const config: Config = {
 4 |   content: [
 5 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 6 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
 8 |     "./screens/**/*.{js,ts,jsx,tsx,mdx}",
 9 |   ],
10 |   theme: {
11 |     extend: {
12 |       animation: {
13 |         ["shine-infinite"]: "shine-infinite 2s ease-in-out infinite",
14 |       },
15 |       keyframes: {
16 |         ["shine-infinite"]: {
17 |           "0%": {
18 |             transform: "skew(-12deg) translateX(-100%)",
19 |           },
20 |           "100%": {
21 |             transform: "skew(-12deg) translateX(100%)",
22 |           },
23 |         },
24 |       },
25 |     },
26 |   },
27 |   plugins: [],
28 | };
29 | 
30 | export default config;
31 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------