Repository: r1/cssbuttons
Branch: master
Commit: c416ffc28422
Files: 82
Total size: 162.1 KB
Directory structure:
gitextract_k5fhr9_x/
├── .eslintrc.json
├── .gitignore
├── README.md
├── components/
│ ├── Buttons/
│ │ └── Buttons.tsx
│ ├── LayoutGA.js
│ └── Sidebar/
│ └── Sidebar.tsx
├── next-env.d.ts
├── next.config.js
├── package.json
├── pages/
│ ├── _app.tsx
│ ├── _document.tsx
│ ├── buttons/
│ │ ├── 0.tsx
│ │ ├── 1.tsx
│ │ ├── 10.tsx
│ │ ├── 11.tsx
│ │ ├── 12.tsx
│ │ ├── 13.tsx
│ │ ├── 14.tsx
│ │ ├── 15.tsx
│ │ ├── 16.tsx
│ │ ├── 17.tsx
│ │ ├── 18.tsx
│ │ ├── 19.tsx
│ │ ├── 2.tsx
│ │ ├── 20.tsx
│ │ ├── 21.tsx
│ │ ├── 22.tsx
│ │ ├── 23.tsx
│ │ ├── 24.tsx
│ │ ├── 25.tsx
│ │ ├── 26.tsx
│ │ ├── 27.tsx
│ │ ├── 28.tsx
│ │ ├── 29.tsx
│ │ ├── 3.tsx
│ │ ├── 30.tsx
│ │ ├── 31.tsx
│ │ ├── 32.tsx
│ │ ├── 33.tsx
│ │ ├── 34.tsx
│ │ ├── 35.tsx
│ │ ├── 36.tsx
│ │ ├── 37.tsx
│ │ ├── 38.tsx
│ │ ├── 39.tsx
│ │ ├── 4.tsx
│ │ ├── 40.tsx
│ │ ├── 41.tsx
│ │ ├── 42.tsx
│ │ ├── 43.tsx
│ │ ├── 44.tsx
│ │ ├── 45.tsx
│ │ ├── 46.tsx
│ │ ├── 47.tsx
│ │ ├── 48.tsx
│ │ ├── 49.tsx
│ │ ├── 5.tsx
│ │ ├── 50.tsx
│ │ ├── 51.tsx
│ │ ├── 52.tsx
│ │ ├── 53.tsx
│ │ ├── 54.tsx
│ │ ├── 55.tsx
│ │ ├── 56.tsx
│ │ ├── 57.tsx
│ │ ├── 58.tsx
│ │ ├── 59.tsx
│ │ ├── 6.tsx
│ │ ├── 60.tsx
│ │ ├── 61.tsx
│ │ ├── 62.tsx
│ │ ├── 7.tsx
│ │ ├── 8.tsx
│ │ └── 9.tsx
│ └── index.tsx
├── postcss.config.js
├── public/
│ └── ads.txt
├── scripts/
│ └── generate-sitemap.js
├── styles/
│ └── globals.css
├── tailwind.config.js
├── tsconfig.json
└── utils/
└── analytics.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintrc.json
================================================
{
"extends": "next/core-web-vitals",
"rules": {
"@next/next/no-html-link-for-pages": ["error", "/my-app/pages/"]
}
}
================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
# vercel
.vercel
================================================
FILE: README.md
================================================
<h1 align="center">cssbuttons.app</h1>
<h3 align="center">Button collection with a focus on simplicity and ease of use.</h3>
<div align="center">Tech Stack: Next.js, Tailwind CSS, CSS</div>
<br>
# Report Bug
Found a bug? Report it [here](https://github.com/r1/cssbuttons/issues).
# Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.<br />
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.<br />
You will also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.<br />
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.<br />
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.<br />
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
# License
### cssbuttons is [MIT licensed](./LICENSE).
================================================
FILE: components/Buttons/Buttons.tsx
================================================
/* eslint-disable @next/next/no-html-link-for-pages */
/* eslint-disable @next/next/no-img-element */
export default function Viewer() {
return (
<div id="viewer">
<div id="viewerbuttons">
<div className="btndiv dark">
<a href="/buttons/62" className="bn62">
Button
</a>
</div>
<div className="btndiv dark">
<a
href="/buttons/61"
className="py-3 px-5 bg-indigo-500 text-white text-sm font-semibold rounded-md shadow-lg shadow-indigo-500/50 focus:outline-none"
>
Button
</a>
</div>
<div className="btndiv dark">
<a className="bn60" href="/buttons/60">
Button
</a>
</div>
<div className="btndiv dark">
<a className="bn59" href="/buttons/59">
Button
</a>
</div>
<div className="btndiv dark">
<a
className="inline-flex items-center px-4 py-2 mt-2 text-lg font-semibold tracking-tighter text-white bg-blue-600"
href="/buttons/58"
>
Button
</a>
</div>
<div className="btndiv dark">
<a
className="inline-flex items-center px-4 py-2 mt-2 text-lg font-semibold tracking-tighter text-black bg-white rounded-xl"
href="/buttons/57"
>
Button
</a>
</div>
<div className="btndiv dark">
<a
href="/buttons/56"
className="inline-flex rounded-md shadow-sm bg-purple-700"
>
<button
type="button"
className="inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-rose-600 hover:bg-rose-500 focus:border-rose-700 active:bg-rose-700 transition ease-in-out duration-150"
>
<svg
className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
Button
</button>
</a>
</div>
<div className="btndiv dark">
<a
className="inline-flex items-center px-4 py-2 mt-2 font-semibold tracking-tighter text-white transition duration-500 ease-in-out transform bg-transparent border rounded-lg text-md hover:text-black hover:bg-white focus:shadow-outline"
href="/buttons/55"
>
<div className="flex text-lg tracking-tighter">
<span className="justify-center">Buttons</span>
</div>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/54">
<button className="bn54">
<span className="bn54span">Button</span>
</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/53">
<button className="bn53">Button</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/52">
<button className="w3-btn w3-white">
<i>Button</i>
</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/51">
<button className="w3-btn w3-blue">
<b>Button</b>
</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/50">
<button className="w3-btn w3-deep-purple">Button</button>
</a>
</div>
<div className="btndiv dark">
<a className="bn49" href="/buttons/49">
Button
</a>
</div>
<div className="btndiv dark">
<a className="bn48" href="/buttons/48">
Button
</a>
</div>
<div className="btndiv dark">
<a className="bn47" href="/buttons/47">
Button
</a>
</div>
<div className="btndiv dark">
<div>
<a href="/buttons/46">
<img
className="bn46"
src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg"
alt="bn46"
/>
</a>
</div>
</div>
<div className="btndiv dark">
<div>
<a href="/buttons/45">
<img
className="bn45"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Google_Play_Store_badge_EN.svg/2560px-Google_Play_Store_badge_EN.svg.png"
alt="bn45"
/>
</a>
</div>
</div>
<div className="btndiv dark">
<a href="/buttons/44">
<img
className="bn44"
src="https://developer.microsoft.com/en-us/store/badges/images/English_get-it-from-MS.png"
alt="Badge"
/>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/43" className="btn41-43 btn-43">
Button
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/42" className="btn41-43 btn-42">
Button
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/41" className="btn41-43 btn-41">
Button
</a>
</div>
<div className="btndiv dark">
<a className="bn40" href="/buttons/40">
Button
</a>
</div>
<div className="btndiv dark">
<a className="bn39" href="/buttons/39">
<span className="bn39span">Button</span>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/38" className="bn3637 bn38">
Hover
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/37" className="bn3637 bn37">
Button
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/36" className="bn3637 bn36">
Button
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/35" className="bn35">
Button
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/34">
<button className="bn34">Button</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/33">
<button className="bn33">Button</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/32">
<button className="bn-32 bn32">Hover</button>
</a>
</div>
<div className="btndiv dark">
<a className="bn31" href="/buttons/31">
<span className="bn31span">Button</span>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/30">
<button className="bn30">Button</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/29">
<button className="bn29">Button</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/28">
<button className="bn632-hover bn28">Button</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/27">
<button className="bn632-hover bn27">Button</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/26">
<button className="bn632-hover bn26">Button</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/25">
<button className="bn632-hover bn25">Button</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/24">
<button className="bn632-hover bn24">Button</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/23">
<button className="bn632-hover bn23">Button</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/22">
<button className="bn632-hover bn22">Button</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/21">
<button className="bn632-hover bn21">Button</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/20">
<button className="bn632-hover bn20">Button</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/19">
<button className="bn632-hover bn19">Button</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/18">
<button className="bn632-hover bn18">Button</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/17" className="bn17">
Button
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/16" className="bn16">
Button
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/15" className="bn15">
Button
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/14" className="bn14">
Button
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/13" className="bn13 bn11bouncy">
Button
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/12">
<button className="w3-button w3-blue w3-border w3-border-white w3-round-large">
Button
</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/11" className="bn11">
Button
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/10">
<button className="w3-button w3-black w3-round-small">
Button
</button>
</a>
</div>
<div className="btndiv light">
<a href="/buttons/9" className="bnt521">
<button className="bn9">
<span>Button</span>
</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/8">
<button className="bn8">
<i className="fa fa-home"></i> Home
</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/7" className="bn7">
Button
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/6">
<button className="bn6">Button</button>
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/5" className="bn5">
Hover
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/4" className="bn4">
Button
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/3" className="bn3">
Button
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/2" className="bn2">
Button
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/1" className="bn1">
Button
</a>
</div>
<div className="btndiv dark">
<a href="/buttons/0" className="">
<button>Button</button>
</a>
</div>
</div>
<ins
className="adsbygoogle"
data-ad-client="ca-pub-6099445439299322"
data-ad-slot="6817517186"
data-ad-format="auto"
data-full-width-responsive="true"
/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
);
}
================================================
FILE: components/LayoutGA.js
================================================
import React from "react";
import { initGA, logPageView } from "../utils/analytics";
export default class Layout extends React.Component {
componentDidMount() {
if (!window.GA_INITIALIZED) {
initGA();
window.GA_INITIALIZED = true;
}
logPageView();
}
render() {
return <div>{this.props.children}</div>;
}
}
================================================
FILE: components/Sidebar/Sidebar.tsx
================================================
import Link from "next/link";
export default function Sidebar() {
return (
<div id="panel">
<div id="header">
<Link href="/">cssbuttons.app</Link>
</div>
<div id="panelScrim">
<div id="contentWrapper">
<div id="content">
<h3 className="h3bg font-semibold">How to use</h3>
<h4 className="h4bg">
Click on your desired button and copy the HTML & CSS.
</h4>
<h2 className="h2bg font-semibold">Code</h2>
<ul>
<li>
<a
className="bglink"
href="https://github.com/r1/cssbuttons"
target="_blank"
rel="noopener noreferrer"
>
GitHub
</a>
</li>
<li>
<a
className="bglink"
href="https://github.com/r1/cssbuttons/releases/tag/v2.0.0"
target="_blank"
rel="noopener noreferrer"
>
Download
</a>
</li>
</ul>
<h2 className="h2bg font-semibold">New?</h2>
<ul>
<li>
<a
className="bglink"
href="https://www.youtube.com/watch?v=mU6anWqZJcc"
target="_blank"
rel="noopener noreferrer"
>
Learn HTML & CSS
</a>
</li>
<li>
<a
className="bglink"
href="https://htmlcheatsheet.com/css/"
target="_blank"
rel="noopener noreferrer"
>
CSS Cheatsheet
</a>
</li>
<li>
<a
className="bglink"
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan extension
</a>
</li>
</ul>
<a href="https://getcssscan.com/?ref=cssbuttonsapp">
<div className="cssscan">
<img src="https://toastlog.com/img/logos/cssscan.svg" alt="CSS Scan logo" />
CSS Scan - Easily inspect or copy any website's CSS
</div>
</a>
</div>
</div>
</div>
</div>
);
}
================================================
FILE: next-env.d.ts
================================================
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
================================================
FILE: next.config.js
================================================
module.exports = {
reactStrictMode: true,
env: {
REACT_APP_GA_ENV: process.env.REACT_APP_GA_ENV,
},
webpack: (config, { isServer }) => {
if (!isServer) config.resolve.fallback.fs = false;
return config;
},
};
================================================
FILE: package.json
================================================
{
"name": "cssbuttons",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"dotenv": "^10.0.0",
"next": "^12.0.7",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-ga": "^3.3.0",
"react-syntax-highlighter": "^15.4.5"
},
"devDependencies": {
"@types/react": "^17.0.37",
"autoprefixer": "^10.4.0",
"eslint": "7.32.0",
"eslint-config-next": "12.0.7",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.7"
}
}
================================================
FILE: pages/_app.tsx
================================================
import "../styles/globals.css";
import LayoutGA from "../components/LayoutGA";
import Head from "next/head";
import Sidebar from "../components/Sidebar/Sidebar";
function MyApp({ Component, pageProps }) {
return (
<LayoutGA>
<Head>
<title>cssbuttons.app | Over 60+ Free CSS Buttons To Use</title>
<meta
name="description"
content="Collection of over 60+ handpicked and custom made CSS buttons for your website."
/>
<meta
name="keywords"
content="cssbuttons.app, cssbuttons, css buttons, css button, button css, buttons css, button html css, button"
/>
<meta name="author" content="Jack Latimer" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6099445439299322"
crossOrigin="anonymous"
/>
</Head>
<Sidebar />
<Component {...pageProps} />
</LayoutGA>
);
}
export default MyApp;
================================================
FILE: pages/_document.tsx
================================================
/* eslint-disable @next/next/no-sync-scripts */
import { Html, Head, Main, NextScript } from "next/document";
function document() {
return (
<Html lang="en">
<Head />
<body>
<a href="https://getcssscan.com/?ref=cssbuttonsapp_mobile" className="mobile-only">
<div className="cssscan">
<img src="https://toastlog.com/img/logos/cssscan.svg" alt="CSS Scan logo" />
Have you seen CSS Scan? Click to learn more
</div>
</a>
<Main />
<NextScript />
</body>
</Html>
);
}
export default document;
================================================
FILE: pages/buttons/0.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #0</h2>
<div className="py-5">
<button>Button</button>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://twitter.com/timberners_lee"
target="_blank"
rel="noopener noreferrer"
>
Tim Berners-Lee
</a>
</h2>
<div>
<pre className="code">{`<button>Button</button>`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/1.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #1</h2>
<div className="py-5">
<a href="/buttons/1" className="bn1">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/" class="bn1">Button</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn1 {
display: inline-block;
padding: 0.6em 1.7em;
border: 0.1em solid #ffffff;
margin: 0 0.3em 0.3em 0;
border-radius: 0.12em;
box-sizing: border-box;
text-decoration: none;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #ffffff;
text-align: center;
transition: all 0.2s;
}
.bn1:hover {
color: #000000;
background-color: #ffffff;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/10.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #10</h2>
<div className="py-5">
<a href="/buttons/10">
<button className="w3-button w3-black w3-round-small">
Button
</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://www.w3schools.com/"
target="_blank"
rel="noopener noreferrer"
>
https://www.w3schools.com/
</a>
</h2>
<div>
<pre className="code">{`<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">`}</pre>
</div>
<div>
<pre className="code">{`<a href="/"><button class="w3-button w3-black w3-round-small">Button</button></a>`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/11.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #11</h2>
<div className="py-5">
<a href="/buttons/11" className="bn11">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/" class="bn11">Button</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn11 {
display: inline-block;
padding: 0.5em 1.7em;
margin: 0 0.1em 0.1em 0;
border: 0.16em solid rgba(255, 255, 255, 0);
background-color: rgb(80, 10, 172);
border-radius: 2em;
box-sizing: border-box;
text-decoration: none;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #ffffff;
text-shadow: 0 0.04em 0.04em rgba(0, 0, 0, 0.35);
text-align: center;
transition: all 0.2s;
}
a.bn11:hover {
border-color: rgb(255, 255, 255);
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/12.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #12</h2>
<div className="py-5">
<a href="/buttons/12">
<button className="w3-button w3-blue w3-border w3-border-white w3-round-large">
Button
</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://www.w3schools.com"
target="_blank"
rel="noopener noreferrer"
>
w3schools.com
</a>
</h2>
<div>
<pre className="code">{`<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">`}</pre>
</div>
<div>
<pre className="code">{`<a href="/"><button class="w3-button w3-blue w3-border w3-border-white w3-round-large">Button</button></a>`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/13.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #13 - Bouncy button</h2>
<div className="py-5">
<a href="/buttons/13" className="bn13">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/" class="bn13">Button</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn13 {
display: inline-block;
padding: 0.65em 1.6em;
border: 3px solid #ffffff;
margin: 0 0.3em 0.3em 0;
border-radius: 0.12em;
box-sizing: border-box;
text-decoration: none;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #ffffff;
text-align: center;
transition: all 0.2s;
animation: bn13bouncy 5s infinite linear;
position: relative;
}
.bn13:hover {
background-color: white;
color: #000000;
}
@keyframes bn13bouncy {
0% {
top: 0em;
}
40% {
top: 0em;
}
43% {
top: -0.9em;
}
46% {
top: 0em;
}
48% {
top: -0.4em;
}
50% {
top: 0em;
}
100% {
top: 0em;
}
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/14.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #14</h2>
<div className="py-5">
<a href="/buttons/14" className="bn14">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/" class="bn14">Button</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn14 {
font-family: lato,sans-serif;
font-weight: bold;
font-size: 1em;
letter-spacing: 0.1em;
text-decoration: none;
color: #ffffff;
display: inline-block;
padding: 10px 40px 10px 40px;
position: relative;
border: 3px solid #ffffff;
border-radius: 25px;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/15.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #15</h2>
<div className="py-5">
<a href="/buttons/15" className="bn15">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/" class="bn15">Button</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn15 {
font-family: lato,sans-serif;
font-weight: bold;
font-size: 1em;
letter-spacing: 0.1em;
text-decoration: none;
color: #ffffff;
display: inline-block;
padding: 10px 40px 10px 40px;
position: relative;
border: 3px solid #ffffff;
border-radius: 20px;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/16.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #16</h2>
<div className="py-5">
<a href="/buttons/16" className="bn16">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/" class="bn16">Button</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn16 {
font-family: lato,sans-serif;
font-weight: bold;
font-size: 1em;
letter-spacing: 0.1em;
text-decoration: none;
color: #ffffff;
display: inline-block;
padding: 10px 40px 10px 40px;
position: relative;
border: 3px solid #ffffff;
border-radius: 25px;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/17.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #17</h2>
<div className="py-5">
<a href="/buttons/17" className="bn17">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/" class="bn17">Button</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn17 {
font-family: lato,sans-serif;
font-weight: bold;
font-size: 1em;
letter-spacing: 0.1em;
text-decoration: none;
color: #ffffff;
display: inline-block;
padding: 10px 40px 10px 40px;
position: relative;
border: 3px solid #ffffff;
border-radius: 20px;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/18.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #18</h2>
<div className="py-5">
<a href="/buttons/18">
<button className="bn632-hover bn18">Button</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://codepen.io/JavaScriptJunkie/pen/pPRooV"
target="_blank"
rel="noopener noreferrer"
>
codepen.io/JavaScriptJunkie/pen/pPRooV
</a>
</h2>
<div>
<pre className="code">{`<a href="/"><button class="bn632-hover bn18">Button</button></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn632-hover {
width: 160px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
border: none;
background-size: 300% 100%;
border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:focus {
outline: none;
}
.bn632-hover.bn18 {
background-image: linear-gradient(
to right,
#25aae1,
#40e495,
#30dd8a,
#2bb673
);
box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/19.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #19</h2>
<div className="py-5">
<a href="/buttons/19">
<button className="bn632-hover bn19">Button</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://codepen.io/JavaScriptJunkie/pen/pPRooV"
target="_blank"
rel="noopener noreferrer"
>
codepen.io/JavaScriptJunkie/pen/pPRooV
</a>
</h2>
<div>
<pre className="code">{`<a href="/"><button class="bn632-hover bn19">Button</button></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn632-hover {
width: 160px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
border: none;
background-size: 300% 100%;
border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:focus {
outline: none;
}
.bn632-hover.bn19 {
background-image: linear-gradient(
to right,
#f5ce62,
#e43603,
#fa7199,
#e85a19
);
box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/2.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #2</h2>
<div className="py-5">
<a href="/buttons/2" className="bn2">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/buttons/2" class="bn2">Button</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn2 {
background-color: #ffffff;
border: none;
color: rgb(0, 0, 0);
padding: 0.3em 1.2em;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/20.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #20</h2>
<div className="py-5">
<a href="/buttons/20">
<button className="bn632-hover bn20">Button</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://codepen.io/JavaScriptJunkie/pen/pPRooV"
target="_blank"
rel="noopener noreferrer"
>
codepen.io/JavaScriptJunkie/pen/pPRooV
</a>
</h2>
<div>
<pre className="code">{`<a href="/"><button class="bn632-hover bn20">Button</button></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn632-hover {
width: 160px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
border: none;
background-size: 300% 100%;
border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:focus {
outline: none;
}
.bn632-hover.bn20 {
background-image: linear-gradient(
to right,
#667eea,
#764ba2,
#6b8dd6,
#8e37d7
);
box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/21.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #21</h2>
<div className="py-5">
<a href="/buttons/21">
<button className="bn632-hover bn21">Button</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://codepen.io/JavaScriptJunkie/pen/pPRooV"
target="_blank"
rel="noopener noreferrer"
>
codepen.io/JavaScriptJunkie/pen/pPRooV
</a>
</h2>
<div>
<pre className="code">{`<a href="/"><button class="bn632-hover bn21">Button</button></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn632-hover {
width: 160px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
border: none;
background-size: 300% 100%;
border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:focus {
outline: none;
}
.bn632-hover.bn21 {
background-image: linear-gradient(
to right,
#fc6076,
#ff9a44,
#ef9d43,
#e75516
);
box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/22.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #22</h2>
<div className="py-5">
<a href="/buttons/22">
<button className="bn632-hover bn22">Button</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://codepen.io/JavaScriptJunkie/pen/pPRooV"
target="_blank"
rel="noopener noreferrer"
>
codepen.io/JavaScriptJunkie/pen/pPRooV
</a>
</h2>
<div>
<pre className="code">{`<a href="/"><button class="bn632-hover bn22">Button</button></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn632-hover {
width: 160px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
border: none;
background-size: 300% 100%;
border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:focus {
outline: none;
}
.bn632-hover.bn22 {
background-image: linear-gradient(
to right,
#0ba360,
#3cba92,
#30dd8a,
#2bb673
);
box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/23.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #23</h2>
<div className="py-5">
<a href="/buttons/23">
<button className="bn632-hover bn18">Button</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://codepen.io/JavaScriptJunkie/pen/pPRooV"
target="_blank"
rel="noopener noreferrer"
>
codepen.io/JavaScriptJunkie/pen/pPRooV
</a>
</h2>
<div>
<pre className="code">{`<a href="/"><button class="bn632-hover bn23">Button</button></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn632-hover {
width: 160px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
border: none;
background-size: 300% 100%;
border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:focus {
outline: none;
}
.bn632-hover.bn23 {
background-image: linear-gradient(
to right,
#009245,
#fcee21,
#00a8c5,
#d9e021
);
box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/24.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #24</h2>
<div className="py-5">
<a href="/buttons/24">
<button className="bn632-hover bn24">Button</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://codepen.io/JavaScriptJunkie/pen/pPRooV"
target="_blank"
rel="noopener noreferrer"
>
codepen.io/JavaScriptJunkie/pen/pPRooV
</a>
</h2>
<div>
<pre className="code">{`<a href="/"><button class="bn632-hover bn24">Button</button></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn632-hover {
width: 160px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
height: 55px;
text-align: center;
border: none;
background-size: 300% 100%;
border-radius: 50px;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.bn632-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:focus {
outline: none;
}
.bn632-hover.bn24 {
background-image: linear-gradient(
to right,
#6253e1,
#852d91,
#a3a1ff,
#f24645
);
box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/25.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #25</h2>
<div className="py-5">
<a href="/buttons/25">
<button className="bn632-hover bn25">Button</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://codepen.io/JavaScriptJunkie/pen/pPRooV"
target="_blank"
rel="noopener noreferrer"
>
codepen.io/JavaScriptJunkie/pen/pPRooV
</a>
</h2>
<div>
<pre className="code">{`<a href="/"><button class="bn632-hover bn25">Button</button></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn632-hover {
width: 160px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
border: none;
background-size: 300% 100%;
border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:focus {
outline: none;
}
.bn632-hover.bn25 {
background-image: linear-gradient(
to right,
#29323c,
#485563,
#2b5876,
#4e4376
);
box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/26.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #26</h2>
<div className="py-5">
<a href="/buttons/26">
<button className="bn632-hover bn26">Button</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://codepen.io/JavaScriptJunkie/pen/pPRooV"
target="_blank"
rel="noopener noreferrer"
>
codepen.io/JavaScriptJunkie/pen/pPRooV
</a>
</h2>
<div>
<pre className="code">{`<a href="/"><button class="bn632-hover bn26">Button</button></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn632-hover {
width: 160px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
border: none;
background-size: 300% 100%;
border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:focus {
outline: none;
}
.bn632-hover.bn26 {
background-image: linear-gradient(
to right,
#25aae1,
#4481eb,
#04befe,
#3f86ed
);
box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/27.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #27</h2>
<div className="py-5">
<a href="/buttons/27">
<button className="bn632-hover bn27">Button</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://codepen.io/JavaScriptJunkie/pen/pPRooV"
target="_blank"
rel="noopener noreferrer"
>
codepen.io/JavaScriptJunkie/pen/pPRooV
</a>
</h2>
<div>
<pre className="code">{`<a href="/"><button class="bn632-hover bn27">Button</button></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn632-hover {
width: 160px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
border: none;
background-size: 300% 100%;
border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:focus {
outline: none;
}
.bn632-hover.bn27 {
background-image: linear-gradient(
to right,
#ed6ea0,
#ec8c69,
#f7186a,
#fbb03b
);
box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/28.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #28</h2>
<div className="py-5">
<a href="/buttons/28">
<button className="bn632-hover bn28">Button</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://codepen.io/JavaScriptJunkie/pen/pPRooV"
target="_blank"
rel="noopener noreferrer"
>
codepen.io/JavaScriptJunkie/pen/pPRooV
</a>
</h2>
<div>
<pre className="code">{`<a href="/"><button class="bn632-hover bn28">Button</button></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn632-hover {
width: 160px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
border: none;
background-size: 300% 100%;
border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:focus {
outline: none;
}
.bn632-hover.bn28 {
background-image: linear-gradient(
to right,
#eb3941,
#f15e64,
#e14e53,
#e2373f
);
box-shadow: 0 5px 15px rgba(242, 97, 103, 0.4);
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/29.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #29</h2>
<div className="py-5">
<a href="/buttons/29">
<button className="bn29">Button</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://tailwindcss.com/"
target="_blank"
rel="noopener noreferrer"
>
tailwindcss.com
</a>
</h2>
<div>
<pre className="code">{`<a href="/"><button class="bn29">Button</button></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn29 {
border: none;
padding: 0.8em 2.5em;
outline: none;
color: white;
font-style: 1.2em;
position: relative;
z-index: 1;
cursor: pointer;
background: none;
text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.45);
}
.bn29:before,
.bn29:after {
position: absolute;
top: 50%;
left: 50%;
border-radius: 10em;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 105%;
height: 105%;
content: "";
z-index: -2;
background-size: 400% 400%;
background: linear-gradient(
60deg,
#f79533,
#f37055,
#ef4e7b,
#a166ab,
#5073b8,
#1098ad,
#07b39b,
#6fba82
);
}
.bn29:before {
-webkit-filter: blur(7px);
filter: blur(7px);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-animation: pulse 10s infinite ease;
animation: pulse 10s infinite ease;
}
.bn29:after {
-webkit-filter: blur(0.3px);
filter: blur(0.3px);
}
.bn29:hover:before {
width: 115%;
height: 115%;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/3.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #3</h2>
<div className="py-5">
<a href="/" className="bn3">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/" class="bn3">Button</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn3 {
display: inline-block;
padding: 0.5em 1.7em;
margin: 0 0.1em 0.1em 0;
border: 0.16em solid rgb(255, 255, 255);
border-radius: 2em;
box-sizing: border-box;
text-decoration: none;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #ffffff;
text-shadow: 0 0.04em 0.04em rgba(255, 255, 255, 0.253);
text-align: center;
transition: all 0.2s;
}
.bn3:hover {
color: black;
background-color: rgb(255, 255, 255);
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/30.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #30</h2>
<div className="py-5">
<a href="/buttons/30">
<button className="bn30">Button</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/"><button class="bn30">Button</button></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn30 {
border: 5em;
cursor: pointer;
outline: none;
font-size: 16px;
-webkit-transform: translate(0);
transform: translate(0);
background-image: linear-gradient(45deg, #4568dc, #b06ab3);
padding: 0.7em 2em;
border-radius: 65px;
box-shadow: 1px 1px 10px rgba(255, 255, 255, 0.438);
-webkit-transition: box-shadow 0.25s;
transition: box-shadow 0.25s;
color: white;
}
.bn30 .text {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(45deg, #4568dc, #b06ab3);
}
.bn30:after {
content: "";
border-radius: 18px;
position: absolute;
margin: 4px;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
background: #0e0e10;
}
.bn30:hover {
background-image: linear-gradient(-45deg, #4568dc, #b06ab3);
box-shadow: 0 12px 24px rgba(128, 128, 128, 0.1);
}
.bn30:hover .text {
background-image: linear-gradient(-45deg, #4568dc, #b06ab3);
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/31.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #31</h2>
<div className="py-5">
<a className="bn31" href="/buttons/31">
<span className="bn31span">Button</span>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://codepen.io/amberweinberg/pen/dzJERg"
target="_blank"
rel="noopener noreferrer"
>
codepen.io/amberweinberg/pen/dzJERg
</a>
</h2>
<div>
<pre className="code">{`<a class="bn31" href="/"><span class="bn31span">Button</span></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn31 {
background-image: linear-gradient(to right, #006175 0%, #00a950 100%);
border-radius: 40px;
box-sizing: border-box;
color: #00a84f;
display: block;
height: 50px;
font-size: 1.4em;
padding: 4px;
position: relative;
text-decoration: none;
width: 7em;
z-index: 2;
}
.bn31:hover {
color: #fff;
}
.bn31 .bn31span {
align-items: center;
background: #0e0e10;
border-radius: 40px;
display: flex;
justify-content: center;
height: 100%;
transition: background 0.5s ease;
width: 100%;
}
.bn31:hover .bn31span {
background: transparent;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/32.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #32</h2>
<div className="py-5">
<a href="/buttons/32">
<button className="bn-32 bn32">Hover</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://codepen.io/alexboffey/pen/wWXqxO"
target="_blank"
rel="noopener noreferrer"
>
codepen.io/alexboffey/pen/wWXqxO
</a>
</h2>
<div>
<pre className="code">{`<a href="/"><button class="bn-32 bn32">Hover</button></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn32 {
border-color: #ffffff;
padding: 0.6em 2.3em;
cursor: pointer;
font-size: 1em;
color: #ffffff;
background-image: linear-gradient(45deg, transparent 50%, #000000 50%);
background-position: 25%;
background-size: 400%;
-webkit-transition: background 500ms ease-in-out, color 500ms ease-in-out;
transition: background 500ms ease-in-out, color 500ms ease-in-out;
}
.bn32:hover {
color: #ffffff;
background-position: 100%;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/33.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #33</h2>
<div className="py-5">
<a href="/buttons/33">
<button className="bn33">Button</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://codepen.io/chriscoyier/pen/ZVYXRx"
target="_blank"
rel="noopener noreferrer"
>
codepen.io/chriscoyier/pen/ZVYXRx
</a>
</h2>
<div>
<pre className="code">{`<a href="/"><button class="bn33">Button</button></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn33 {
border: 5em;
cursor: pointer;
outline: none;
font-size: 16px;
-webkit-transform: translate(0);
transform: translate(0);
background-image: linear-gradient(45deg, #4568dc, #b06ab3);
padding: 0.7em 2em;
border-radius: 1px;
box-shadow: 1px 1px 10px rgba(255, 255, 255, 0.438);
-webkit-transition: box-shadow 0.25s;
transition: box-shadow 0.25s;
color: white;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/34.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #34</h2>
<div className="py-5">
<a href="/">
<button className="bn34">Button</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/"><button class="bn34">Button</button></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn34 {
background: none;
cursor: pointer;
text-decoration: inherit;
font-size: 1rem;
color: white;
padding: 0.7rem 2rem;
border-image-slice: 1;
border-image-Creator: linear-gradient(to left, #743ad5, #d53a9d);
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/35.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #35</h2>
<div className="py-5">
<a href="/buttons/35">
<h4 className="bn35">Button</h4>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/"><h4 class="bn35">Button</h4></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn35 {
text-decoration: underline;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/36.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #36</h2>
<div className="py-5">
<a href="/buttons/36" className="bn3637 bn36">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/" class="bn3637 bn36">Button</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn3637 {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.7rem 2rem;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 18px;
text-align: center;
text-decoration: none;
color: #fff;
backface-visibility: hidden;
border: 0.3rem solid transparent;
border-radius: 3rem;
}
.bn36 {
border-color: #fff;
transition: transform 0.2s cubic-bezier(0.235, 0, 0.05, 0.95);
}
.bn36:hover {
transform: perspective(1px) scale3d(1.044, 1.044, 1) translateZ(0) !important;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/37.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #37</h2>
<div className="py-5">
<a href="/buttons/37" className="bn3637 bn37">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/" class="bn3637 bn37">Button</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn3637 {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.7rem 2rem;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 18px;
text-align: center;
text-decoration: none;
color: #fff;
backface-visibility: hidden;
border: 0.3rem solid transparent;
border-radius: 3rem;
}
.bn37 {
border-color: transparent;
background-color: #fff;
color: #000;
transition: transform 0.2s cubic-bezier(0.235, 0, 0.05, 0.95);
}
.bn37:hover {
transform: perspective(1px) scale3d(1.044, 1.044, 1) translateZ(0) !important;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/38.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #38</h2>
<div className="py-5">
<a href="/buttons/38" className="bn3637 bn38">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/" class="bn3637 bn38">Hover</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn3637 {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.7rem 2rem;
font-weight: 700;
font-size: 18px;
text-align: center;
text-decoration: none;
color: #fff;
backface-visibility: hidden;
border: 0.3rem solid transparent;
border-radius: 3rem;
}
.bn38 {
border-color: transparent;
transition: background-color 0.3s ease-in-out;
}
.bn38:hover {
background-color: #60605e;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/39.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #39</h2>
<div className="py-5">
<a className="bn39" href="/buttons/39">
<span className="bn39span">Button</span>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a class="bn39" href="/"><span class="bn39span">Button</span></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn39 {
background-image: linear-gradient(135deg, #008aff, #86d472);
border-radius: 6px;
box-sizing: border-box;
color: #ffffff;
display: block;
height: 50px;
font-size: 1.4em;
font-weight: 600;
padding: 4px;
position: relative;
text-decoration: none;
width: 7em;
z-index: 2;
}
.bn39:hover {
color: #fff;
}
.bn39 .bn39span {
align-items: center;
background: #0e0e10;
border-radius: 6px;
display: flex;
justify-content: center;
height: 100%;
transition: background 0.5s ease;
width: 100%;
}
.bn39:hover .bn39span {
background: transparent;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/4.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #4 - With Opacity Effect on Hover</h2>
<div className="py-5">
<a href="/buttons/4" className="bn4">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/" class="bn4">Button</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn4 {
background-color: #ffffff;
border: none;
color: rgb(0, 0, 0);
padding: 0.7em 1.7em;
text-align: center;
font-size: 16px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
.bn4:hover {
opacity: 1;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/40.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #40</h2>
<div className="py-5">
<div className="bn40div">
<a className="bn40" href="/buttons/40">
Button
</a>
</div>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<div className="bn40div">
<a class="bn40" href="/">Button</a>
</div>`}</pre>
</div>
<div>
<pre className="code">{`.bn40 {
border-radius: 4px;
font-weight: 600;
font-size: large;
padding: 4px 6px;
color: #fff !important;
}
.bn40::after {
max-width: 100%;
height: 2px;
display: block;
content: "";
background: linear-gradient(-90deg, #ff9100 0%, #f10366 50%, #6173ff 100%);
opacity: 1;
margin-bottom: -6px;
margin-top: 1px;
}
.bn40div {
display: flex;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/41.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #41</h2>
<div className="py-5">
<a href="/buttons/41" className="btn41-43 btn-41">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/buttons/41" class="btn41-43 btn-41">
Button
</a>`}</pre>
</div>
<div>
<pre className="code">{`.btn41-43 {
padding: 10px 25px;
font-family: "Roboto", sans-serif;
font-weight: 500;
background: transparent;
outline: none !important;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
}
.btn-41 {
border: 2px solid rgb(255, 255, 255);
z-index: 1;
color: white;
}
.btn-41:after {
position: absolute;
content: "";
width: 0;
height: 100%;
top: 0;
left: 0;
direction: rtl;
z-index: -1;
background: rgb(255, 255, 255);
transition: all 0.3s ease;
}
.btn-41:hover {
color: rgb(0, 0, 0);
}
.btn-41:hover:after {
left: auto;
right: 0;
width: 100%;
}
.btn-41:active {
top: 2px;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/42.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #42</h2>
<div className="py-5">
<a href="/buttons/42" className="btn41-43 btn-42">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/buttons/42" class="btn41-43 btn-42">
Button
</a>`}</pre>
</div>
<div>
<pre className="code">{`.btn41-43 {
padding: 10px 25px;
font-family: "Roboto", sans-serif;
font-weight: 500;
background: transparent;
outline: none !important;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
}
.btn-42 {
border: 2px solid rgb(255, 255, 255);
z-index: 1;
color: white;
}
.btn-42:after {
position: absolute;
content: "";
width: 100%;
height: 0;
bottom: 0;
left: 0;
z-index: -1;
background: rgb(255, 255, 255);
transition: all 0.3s ease;
}
.btn-42:hover {
color: rgb(0, 0, 0);
}
.btn-42:hover:after {
top: 0;
height: 100%;
}
.btn-42:active {
top: 2px;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/43.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #43</h2>
<div className="py-5">
<a href="/buttons/43" className="btn41-43 btn-43">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/buttons/43" class="btn41-43 btn-43">
Button
</a>`}</pre>
</div>
<div>
<pre className="code">{`.btn41-43 {
padding: 10px 25px;
font-family: "Roboto", sans-serif;
font-weight: 500;
background: transparent;
outline: none !important;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
}
.btn-43 {
border: 2px solid rgb(255, 255, 255);
z-index: 1;
color: white;
}
.btn-43:after {
position: absolute;
content: "";
width: 100%;
height: 0;
top: 0;
left: 0;
z-index: -1;
background: rgb(255, 255, 255);
transition: all 0.3s ease;
}
.btn-43:hover {
color: rgb(0, 0, 0);
}
.btn-43:hover:after {
top: auto;
bottom: 0;
height: 100%;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/44.tsx
================================================
/* eslint-disable @next/next/no-img-element */
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #44 - Microsoft Store Download Button</h2>
<div className="py-5">
<a href="/buttons/44">
<img
className="bn44"
src="https://developer.microsoft.com/en-us/store/badges/images/English_get-it-from-MS.png"
alt="Badge"
/>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href='/'><img class="bn44" src='https://developer.microsoft.com/en-us/store/badges/images/English_get-it-from-MS.png' alt='Badge'/></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn44 {
width: 160px;
height: 60px;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/45.tsx
================================================
/* eslint-disable @next/next/no-img-element */
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #45 - Google Play Store Button</h2>
<div className="py-5">
<a href="/buttons/45">
<img
className="bn45"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Google_Play_Store_badge_EN.svg/2560px-Google_Play_Store_badge_EN.svg.png"
alt="bn45"
/>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/" tabIndex="0"><img class="bn45" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Google_Play_Store_badge_EN.svg/2560px-Google_Play_Store_badge_EN.svg.png" alt="bn45"/></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn45 {
width: 170px;
height: 50px;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/46.tsx
================================================
/* eslint-disable @next/next/no-img-element */
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #46 - Download on the App Store button</h2>
<div className="py-5">
<a href="/buttons/46">
<img
className="bn46"
src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg"
alt="bn45"
/>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/" tabIndex="0"><img class="bn46" src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg"alt="bn45"/></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn46 {
width: 150px;
height: 50px;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/47.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #47</h2>
<div className="py-5">
<a className="bn47" href="/buttons/47">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://codepen.io/thomasvaeth/pen/QpBdNo"
target="_blank"
rel="noopener noreferrer"
>
codepen.io/thomasvaeth/pen/QpBdNo
</a>
</h2>
<div>
<pre className="code">{`<a class="bn47" href="/">Button</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn47 {
position: relative;
padding: 1rem 2rem 0.5rem 2.5rem;
color: #000000;
border: 3px solid #776e62;
-webkit-transition: padding 0.3s ease-in-out;
transition: padding 0.3s ease-in-out;
}
.bn47:before {
content: "";
position: absolute;
top: 0.5rem;
left: 0.5rem;
z-index: -1;
height: 100%;
width: 100%;
background-color: #ffffff;
border-right: 3px solid #ffffff;
border-bottom: 3px solid #ffffff;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.bn47:hover {
padding: 0.75rem 2.25rem;
}
.bn47:hover:before {
top: 0;
left: 0;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/48.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #48</h2>
<div className="py-5">
<a className="bn48" href="/buttons/48">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a class="bn48" href="/">Button</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn48 {
background: linear-gradient(90deg, #1e39a5, #c50e07);
background-size: auto;
background-clip: border-box;
-webkit-background-clip: text;
background-clip: text;
background-size: 300% 300%;
-webkit-text-fill-color: transparent;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/49.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #49</h2>
<div className="py-5">
<a className="bn49" href="/buttons/48">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a class="bn49" href="/">Button</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn49 {
border: 0;
text-align: center;
display: inline-block;
padding: 14px;
width: 150px;
margin: 7px;
color: #ffffff;
background-color: #36a2eb;
border-radius: 8px;
font-family: "proxima-nova-soft", sans-serif;
font-weight: 600;
text-decoration: none;
transition: box-shadow 200ms ease-out;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/5.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #5 - Animated Gradient On Hover</h2>
<div className="py-5">
<a href="/buttons/5" className="bn5">
Hover
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/" class="bn5">Hover</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn5 {
padding: 0.6em 2em;
border: none;
outline: none;
color: rgb(255, 255, 255);
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.bn5:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowingbn5 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
@keyframes glowingbn5 {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
.bn5:active {
color: #000;
}
.bn5:active:after {
background: transparent;
}
.bn5:hover:before {
opacity: 1;
}
.bn5:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #191919;
left: 0;
top: 0;
border-radius: 10px;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/50.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #50</h2>
<div className="py-5">
<a href="/buttons/50">
<button className="w3-btn w3-deep-purple">Button</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://w3schools.com"
target="_blank"
rel="noopener noreferrer"
>
w3schools.com
</a>
</h2>
<div>
<pre className="code">{`<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">`}</pre>
</div>
<div>
<pre className="code">{`<a href="/"><button class="w3-btn w3-deep-purple">Button</button></a>`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/51.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #58</h2>
<div className="py-5">
<a href="/buttons/51">
<button className="w3-btn w3-blue">
<b>Button</b>
</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://w3schools.com"
target="_blank"
rel="noopener noreferrer"
>
w3schools.com
</a>
</h2>
<div>
<pre className="code">{`<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">`}</pre>
</div>
<div>
<pre className="code">{`<a href="/">
<button class="w3-btn w3-blue"><b>Button</b></button>
</a>`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/52.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #52</h2>
<div className="py-5">
<a href="/buttons/52">
<button className="w3-btn w3-white">
<i>Button</i>
</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://w3schools.com"
target="_blank"
rel="noopener noreferrer"
>
w3schools.com
</a>
</h2>
<div>
<pre className="code">{`<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">`}</pre>
</div>
<div>
<pre className="code">{`<a href="/">
<button class="w3-btn w3-white"><i>Button</i></button>
</a>`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/53.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #53</h2>
<div className="py-5">
<a href="/buttons/53">
<button className="bn53">Button</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/">
<button class="bn53">Button</button>
</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn53 {
background-color: #b81515;
padding: 7px;
width: 100px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
animation: bn53bounce 4s infinite;
cursor: pointer;
}
@keyframes bn53bounce {
5%,
50% {
transform: scale(1);
}
10% {
transform: scale(1);
}
15% {
transform: scale(1);
}
20% {
transform: scale(1) rotate(-5deg);
}
25% {
transform: scale(1) rotate(5deg);
}
30% {
transform: scale(1) rotate(-3deg);
}
35% {
transform: scale(1) rotate(2deg);
}
40% {
transform: scale(1) rotate(0);
}
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/54.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #54</h2>
<div className="py-5">
<a href="/buttons/54">
<button className="bn54">
<span className="bn54span">Button</span>
</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://codepen.io/Danil89/pen/MzrEdX"
target="_blank"
rel="noopener noreferrer"
>
codepen.io/Danil89/pen/MzrEdX
</a>
</h2>
<div>
<pre className="code">{`<a href="/">
<button class="bn54">
<span class="bn54span">Button</span>
</button>
</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn54 {
position: relative;
outline: none;
text-decoration: none;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
text-transform: uppercase;
height: 45px;
width: 130px;
opacity: 1;
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.6);
}
.bn54 .bn54span {
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #000000;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.7px;
}
.bn54:hover {
animation: bn54rotate 0.7s ease-in-out both;
}
.bn54:hover .bn54span {
animation: bn54storm 0.7s ease-in-out both;
animation-delay: 0.06s;
}
@keyframes bn54rotate {
0% {
transform: rotate(0deg) translate3d(0, 0, 0);
}
25% {
transform: rotate(3deg) translate3d(0, 0, 0);
}
50% {
transform: rotate(-3deg) translate3d(0, 0, 0);
}
75% {
transform: rotate(1deg) translate3d(0, 0, 0);
}
100% {
transform: rotate(0deg) translate3d(0, 0, 0);
}
}
@keyframes bn54storm {
0% {
transform: translate3d(0, 0, 0) translateZ(0);
}
25% {
transform: translate3d(4px, 0, 0) translateZ(0);
}
50% {
transform: translate3d(-3px, 0, 0) translateZ(0);
}
75% {
transform: translate3d(2px, 0, 0) translateZ(0);
}
100% {
transform: translate3d(0, 0, 0) translateZ(0);
}
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/55.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #55</h2>
<div className="py-5">
<a
className="inline-flex items-center px-4 py-2 mt-2 font-semibold tracking-tighter text-white transition duration-500 ease-in-out transform bg-transparent border rounded-lg text-md md:mt-0 hover:text-black hover:bg-white focus:shadow-outline"
href="/buttons/55"
>
<div className="flex text-lg tracking-tighter">
<span className="justify-center">Button</span>
</div>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://tailwindcss.com/"
target="_blank"
rel="noopener noreferrer"
>
tailwindcss.com
</a>
</h2>
<div>
<pre className="code">{`This is a button built with TailwindCSS - https://tailwindcss.com/docs/installation`}</pre>
</div>
<div>
<pre className="code">{`<a
class="inline-flex items-center px-4 py-2 mt-2 font-semibold tracking-tighter text-white transition duration-500 ease-in-out transform bg-transparent border rounded-lg text-md md:mt-0 hover:text-black hover:bg-white focus:shadow-outline"
href="/"
>
<div class="flex text-lg tracking-tighter">
<span class="justify-center">Button</span>
</div>
</a>`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/56.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #56</h2>
<div className="py-5">
<a
href="/buttons/56"
className="inline-flex rounded-md shadow-sm bg-purple-700"
>
<button
type="button"
className="inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-rose-600 hover:bg-rose-500 focus:border-rose-700 active:bg-rose-700 transition ease-in-out duration-150 cursor-not-allowed"
>
<svg
className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
Button
</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://tailwindcss.com/"
target="_blank"
rel="noopener noreferrer"
>
tailwindcss.com
</a>
</h2>
<div>
<pre className="code">{`This is a button built with TailwindCSS - https://tailwindcss.com/docs/installation`}</pre>
</div>
<div>
<pre className="code">{`<a href="/" class="inline-flex rounded-md shadow-sm bg-purple-700">
<button
type="button"
class="inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-rose-600 hover:bg-rose-500 focus:border-rose-700 active:bg-rose-700 transition ease-in-out duration-150 cursor-not-allowed">
<svg
class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
></circle>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
Button
</button>
</a>`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/57.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #57</h2>
<div className="py-5">
<a
className="inline-flex items-center px-4 py-2 mt-2 font-semibold text-lg tracking-tighter bg-white text-black rounded-xl"
href="/buttons/57"
>
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://tailwindcss.com/"
target="_blank"
rel="noopener noreferrer"
>
tailwindcss.com
</a>
</h2>
<div>
<pre className="code">{`This is a button built with TailwindCSS - https://tailwindcss.com/docs/installation`}</pre>
</div>
<div>
<pre className="code">{`<a
class="inline-flex items-center px-4 py-2 mt-2 font-semibold text-lg tracking-tighter bg-blue-600 text-white"
href="/">
Button
</a>`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/58.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #58</h2>
<div className="py-5">
<a
className="inline-flex items-center px-4 py-2 mt-2 font-semibold text-lg tracking-tighter bg-blue-600 text-white"
href="/buttons/58"
>
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://tailwindcss.com/"
target="_blank"
rel="noopener noreferrer"
>
tailwindcss.com
</a>
</h2>
<div>
<pre className="code">{`This is a button built with TailwindCSS - https://tailwindcss.com/docs/installation`}</pre>
</div>
<div>
<pre className="code">{`<a
class="inline-flex items-center px-4 py-2 mt-2 font-semibold text-lg tracking-tighter bg-blue-600 text-white"
href="/">
Button
</a>`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/59.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #59</h2>
<div className="py-5">
<a className="bn59" href="/buttons/59">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a class="bn59" href="/">
Button
</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn59 {
background-color: #141414;
border: 1px solid rgba(54, 54, 54, 0.6);
font-weight: 600;
position: relative;
outline: none;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
height: 45px;
width: 130px;
opacity: 1;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/6.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #6 - Animated Stripes</h2>
<div className="py-5">
<a href="/buttons/6" className="bn6">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/buttons/6" class="bn6">Button</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn6 {
cursor: pointer;
outline: none;
border: none;
background-color: #232423;
padding: 0.3em 1.2em;
border-radius: 30px;
font-size: 1.3rem;
font-weight: 550;
color: #ffffff;
background-size: 100% 100%;
box-shadow: 0 0 0 4px #232423 inset;
}
.bn6:hover {
background-image: linear-gradient(
55deg,
transparent 10%,
#161616 10% 20%,
transparent 20% 30%,
#161616 30% 40%,
transparent 40% 50%,
#161616 50% 60%,
transparent 60% 70%,
#161616 70% 80%,
transparent 80% 90%,
#161616 90% 100%
);
animation: background 3s linear infinite;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/60.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #60</h2>
<div className="py-5">
<a className="bn60" href="/buttons/60">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a class="bn60" href="/">
Button
</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn60 {
background-color: #190c8d;
color: #ffffff;
font-size: 1.3em;
font-weight: 600;
position: relative;
outline: none;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
height: 55px;
width: 160px;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/61.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #61</h2>
<div className="py-5">
<a
href="/buttons/61"
className="py-3 px-5 bg-indigo-500 text-white text-sm font-semibold rounded-md shadow-lg shadow-indigo-500/50 focus:outline-none"
>
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://tailwindcss.com/"
target="_blank"
rel="noopener noreferrer"
>
tailwindcss.com
</a>
</h2>
<div>
<pre className="code">{`This is a button built with TailwindCSS - https://tailwindcss.com/docs/installation`}</pre>
</div>
<div>
<pre className="code">{`<a href="/buttons/61" class="py-3 px-5 bg-indigo-500 text-white text-sm font-semibold rounded-md shadow-lg shadow-indigo-500/50 focus:outline-none">
Button
</a>`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/62.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #62</h2>
<div className="py-5">
<a href="/buttons/62" className="bn62">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/buttons/62" class="bn62">
Button
</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn62 {
color: #1cc49d;
background-color: #1b2f31;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
height: 3em;
width: 8em;
font-size: large;
font-weight: 600;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/7.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #7</h2>
<div className="py-5">
<a href="/buttons/7" className="bn7">
Button
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<a href="/" class="bn7">Hover</a>`}</pre>
</div>
<div>
<pre className="code">{`.bn7 {
cursor: pointer;
outline: none;
border: none;
background-color: #ffffff;
padding: 0.3em 1.2em;
border-radius: 30px;
font-size: 1.2rem;
color: #000000;
background-size: 100% 100%;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/8.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #8</h2>
<div className="py-5">
<a href="/buttons/8">
<button className="bn8">
<i className="fa fa-home"></i> Home
</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://getcssscan.com/?ref=cssbuttonsapp"
>
CSS Scan
</a>
</h2>
<div>
<pre className="code">{`<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">`}</pre>
</div>
<div>
<pre className="code">{`<a href="/buttons/8"><button class="bn8"><i className="fa fa-home"></i> Home</button></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn8 {
background-color: rgb(255, 255, 255);
border: none;
color: rgb(0, 0, 0);
padding: 12px 16px;
font-size: 16px;
font-family: "Roboto", sans-serif;
cursor: pointer;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/buttons/9.tsx
================================================
function Button() {
return (
<>
<div id="viewer">
<div className="px-4 py-8">
<h2 className="text-5xl font-bold">Button #9 - Gradient Border</h2>
<div className="py-5">
<a href="/buttons/9">
<button className="bn9">
<span>Button</span>
</button>
</a>
</div>
<h2 className="text-2xl font-semibold">
Creator:{" "}
<a
href="https://apple.com"
target="_blank"
rel="noopener noreferrer"
>
Apple.com
</a>
</h2>
<div>
<pre className="code">{`<a href="/buttons/9"><button class="bn9"><span>Button</span></button></a>`}</pre>
</div>
<div>
<pre className="code">{`.bn9 {
padding: 2px;
outline: 0;
font-size: 17px;
color: rgb(0, 0, 0);
background: -webkit-gradient(
linear,
left top,
right top,
from(#fdde5c),
color-stop(#f8ab5e),
color-stop(#f56a62),
color-stop(#a176c8),
color-stop(#759beb),
color-stop(#65beb3),
to(#70db96)
);
background: linear-gradient(
to right,
#fdde5c,
#f8ab5e,
#f56a62,
#a176c8,
#759beb,
#65beb3,
#70db96
);
border-radius: 30px;
border: 0;
box-shadow: none;
cursor: pointer;
}
.bn9 > span {
display: block;
padding: 10px 40px;
font-size: 17px;
font-weight: 500;
background: #ebebeb;
border-radius: 30px;
}`}</pre>
</div>
<div className="py-5 mb-20">
<a
href="https://cssbuttons.app"
className="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
>
← See more buttons
</a>
</div>
</div>
</div>
</>
);
}
export default Button;
================================================
FILE: pages/index.tsx
================================================
import Head from "next/head";
import Buttons from "../components/Buttons/Buttons";
export default function Home() {
return (
<>
<Head>
<link
rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</Head>
<Buttons />
</>
);
}
================================================
FILE: postcss.config.js
================================================
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
================================================
FILE: public/ads.txt
================================================
google.com, pub-6099445439299322, DIRECT, f08c47fec0942fa0
================================================
FILE: scripts/generate-sitemap.js
================================================
const fs = require("fs");
const globby = require("globby");
const prettier = require("prettier");
(async () => {
const prettierConfig = await prettier.resolveConfig("./.prettierrc.js");
const pages = await globby(["pages/*.tsx", "pages/buttons/*.tsx"]);
const sitemap = `
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${pages
.map((page) => {
const path = page.replace("pages", "").replace(".js", "");
const route = path === "/index" ? "" : path;
return `
<url>
<loc>${`https://cssbuttons.app${route}`}</loc>
</url>
`;
})
.join("")}
</urlset>
`;
const formatted = prettier.format(sitemap, {
...prettierConfig,
parser: "html",
});
fs.writeFileSync("./public/sitemap.xml", formatted);
})();
================================================
FILE: styles/globals.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");
:root {
--secondary-background-color: #363434;
--color-white: #ffffff;
--font-size: 16px;
--line-height: 26px;
--viewer-width: 300px;
--header-height: 48px;
--icon-size: 20px;
--background-color: #101010;
--text-color: rgb(255, 255, 255);
--color-black: #030303;
--panel-width: 300px;
--panel-padding: 16px;
--border-style: 2px solid #232323;
}
* {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Inter", sans-serif;
}
body {
height: 100%;
font-family: "Inter", sans-serif;
font-size: calc(var(--font-size) - 1px);
line-height: calc(var(--line-height) - 0px);
margin: 0px;
color: var(--text-color);
}
.h2bg {
margin: 12px 0;
font-size: calc(var(--font-size) + 7px);
color: var(--color-white);
font-family: "Inter", sans-serif;
}
.h3bg {
padding: 0;
margin: 12px 0;
font-size: calc(var(--font-size) + 7px);
color: var(--color-white);
font-family: "Inter", sans-serif;
}
.h4bg {
padding: 0;
margin: 12px 0;
padding-bottom: 2px;
font-family: "Inter", sans-serif;
font-size: 16px;
font-weight: 400;
color: var(--color-white);
}
.bglink {
padding: 0;
font-weight: 400;
font-size: calc(var(--font-size));
line-height: var(--line-height);
color: var(--color-white);
}
#header {
display: flex;
height: var(--header-height);
border-bottom: var(--border-style);
align-items: center;
justify-content: center;
}
#header a {
padding-left: var(--panel-padding);
flex: 1;
display: flex;
align-items: center;
color: var(--color-white);
font-family: "Inter", sans-serif;
font-size: 1.3rem;
line-height: 1.3rem;
padding-top: 3px;
padding-bottom: 3px;
font-weight: 600;
justify-content: center;
}
#panel {
background-color: #101010;
position: fixed;
z-index: 100;
left: 0px;
width: var(--panel-width);
height: 100%;
top: 0px;
overflow: auto;
border-right: var(--border-style);
display: flex;
flex-direction: column;
transition: 0s 0s height;
}
#panel #content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding: 0 var(--panel-padding) var(--panel-padding) var(--panel-padding);
}
@media all and (min-width: 1700px) {
:root {
--panel-width: 360px;
--font-size: 18px;
--line-height: 28px;
--header-height: 56px;
--icon-size: 24px;
}
}
@media all and (min-width: 1900px) {
#viewerbuttons {
grid-template-columns: repeat(5, 1fr);
}
}
@media all and (max-width: 1300px) {
#viewerbuttons {
grid-template-columns: repeat(5, 1fr);
}
}
@media all and (max-width: 1100px) {
#viewerbuttons {
grid-template-columns: repeat(2, 1fr);
}
}
@media all and (max-width: 900px) {
#viewerbuttons {
grid-template-columns: repeat(2, 1fr);
}
}
@media all and (max-width: 700px) {
#viewerbuttons {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1500px) {
#viewerbuttons {
grid-template-columns: repeat(2, 1fr);
}
}
@media all and (max-width: 640px) {
:root {
--header-height: 56px;
--icon-size: 24px;
}
#panel {
position: absolute;
left: 0;
top: 0;
width: 100%;
right: 0;
z-index: 1000;
overflow-x: hidden;
transition: 0s 0s height;
border: none;
height: var(--header-height);
transition: 0s 0.2s height;
}
#panel.open {
z-index: 3;
width: 100%;
height: 100%;
transition: 0s 0s height;
}
#panelScrim {
pointer-events: none;
background-color: rgba(0, 0, 0, 0);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 0;
pointer-events: none;
transition: 0.2s background-color;
}
#panel.open #panelScrim {
pointer-events: auto;
background-color: rgba(0, 0, 0, 0.4);
}
#contentWrapper {
position: absolute;
right: 0;
top: 0;
bottom: 0;
background: var(--background-color);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
width: calc(100vw - 60px);
max-width: 360px;
z-index: 1;
transition: 0.25s transform;
overflow-x: hidden;
margin-right: -380px;
line-height: 2rem;
}
#panel.open #contentWrapper {
transform: translate3d(-380px, 0, 0);
}
#viewer,
iframe {
left: 0;
top: var(--header-height);
width: 100%;
height: calc(100% - var(--header-height));
}
#viewer {
padding-left: 0;
}
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Ubuntu, "Helvetica Neue", sans-serif;
margin: 0px;
color: var(--text-color);
background-color: var(--background-color);
}
.logo {
font-family: "Montserrat", sans-serif;
font-size: 20px;
}
#announcement {
padding-left: var(--viewer-width);
}
#viewer {
padding-left: var(--viewer-width);
}
#viewerbuttons {
display: grid;
grid-template: repeat(5, 1fr);
}
::-moz-selection {
color: rgb(0, 0, 0);
background: rgb(255, 255, 255);
}
::selection {
color: rgb(0, 0, 0);
background: rgb(255, 255, 255);
}
@media all and (min-width: 1500px) {
#viewerbuttons {
grid-template-columns: repeat(5, 1fr);
}
}
@media all and (min-width: 1700px) {
:root {
--viewer-width: 359px;
--font-size: 18px;
--line-height: 28px;
--header-height: 56px;
--icon-size: 24px;
}
}
@media all and (max-width: 640px) {
#viewerbuttons {
position: relative;
grid-template-columns: repeat(2, 1fr);
z-index: 1;
}
#viewer {
padding-left: 0;
padding-top: 3.6em;
}
}
.code {
background-color: #181818;
width: 90%;
margin: 20px 0px;
font-family: "Inter", sans-serif;
font-weight: 500;
white-space: pre-wrap;
border: 0 !important;
margin: 20px 0px;
padding: 1em !important;
}
.bn40div {
display: flex;
}
.material-icons {
display: inline-block;
margin-top: 0.7em;
font-size: 1.6em;
}
#displayflex {
display: flex;
}
.cssscan {
padding: 10px;
border-radius: 12px;
text-align: center;
bottom: 15px;
position: absolute;
margin-right: 15px;
transition: all 150ms ease-in-out;
background-size: 120% 120%;
background-image: radial-gradient(100% 102% at 50% -2%, #04761D 48.3%, #023010 100%);
background-position: 40% 50%;
box-shadow: rgb(0 255 98 / 46%) 0px 0px 15px;
}
.cssscan:hover {
background-position: 70% 10%;
box-shadow: rgb(0 255 98 / 55%) 0px 0px 15px;
}
.cssscan img {
vertical-align: middle;
width: 22px;
display: inline;
margin-right: 8px;
}
.mobile-only .cssscan {
position: fixed;
width: 100%;
border-radius: 0;
bottom: 0;
left: 0;
z-index: 99999;
padding: 20px 10px;
}
@media (min-width: 640px) {
.mobile-only {
display: none;
}
}
.adsbygoogle {
display: block;
}
/** Button Start **/
button {
padding: 0.3em 1.2em;
font-family: "Inter", sans-serif;
}
.btndiv {
display: flex;
justify-content: center;
align-items: center;
z-index: 0;
height: 179px;
border: 1px solid #232323;
}
.dark {
background-color: #101010;
}
.light {
background-color: #ebebeb;
}
.bn1 {
display: inline-block;
padding: 0.6em 1.7em;
border: 0.1em solid #ffffff;
margin: 0 0.3em 0.3em 0;
border-radius: 0.12em;
box-sizing: border-box;
text-decoration: none;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #ffffff;
text-align: center;
transition: all 0.2s;
}
.bn1:hover {
color: #000000;
background-color: #ffffff;
}
.bn2 {
background-color: #ffffff;
border: none;
color: rgb(0, 0, 0);
padding: 0.3em 1.2em;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.bn3 {
display: inline-block;
padding: 0.5em 1.7em;
margin: 0 0.1em 0.1em 0;
border: 0.16em solid rgb(255, 255, 255);
border-radius: 2em;
box-sizing: border-box;
text-decoration: none;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #ffffff;
text-shadow: 0 0.04em 0.04em rgba(255, 255, 255, 0.253);
text-align: center;
transition: all 0.2s;
}
.bn3:hover {
color: black;
background-color: rgb(255, 255, 255);
}
.bn4 {
background-color: #ffffff;
border: none;
color: rgb(0, 0, 0);
padding: 0.7em 1.7em;
text-align: center;
font-size: 16px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
.bn4:hover {
opacity: 1;
}
.bn5 {
padding: 0.6em 2em;
border: none;
outline: none;
color: rgb(255, 255, 255);
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.bn5:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowingbn5 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
@keyframes glowingbn5 {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
.bn5:active {
color: #000;
}
.bn5:active:after {
background: transparent;
}
.bn5:hover:before {
opacity: 1;
}
.bn5:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #191919;
left: 0;
top: 0;
border-radius: 10px;
}
:root {
--light: #232423;
--dark: #161616;
--text: #ffffff;
}
.bn6 {
cursor: pointer;
outline: none;
border: none;
background-color: #232423;
padding: 0.3em 1.2em;
border-radius: 30px;
font-size: 1.3rem;
font-weight: 550;
color: #ffffff;
background-size: 100% 100%;
box-shadow: 0 0 0 4px #232423 inset;
}
.bn6:hover {
background-image: linear-gradient(
55deg,
transparent 10%,
#161616 10% 20%,
transparent 20% 30%,
#161616 30% 40%,
transparent 40% 50%,
#161616 50% 60%,
transparent 60% 70%,
#161616 70% 80%,
transparent 80% 90%,
#161616 90% 100%
);
animation: backgroundbn6 3s linear infinite;
}
@keyframes backgroundbn6 {
0% {
background-position: 0 0;
}
100% {
background-position: 400px 0;
}
}
.bn7 {
cursor: pointer;
outline: none;
border: none;
background-color: #ffffff;
padding: 0.3em 1.2em;
border-radius: 30px;
font-size: 1.2rem;
color: #000000;
background-size: 100% 100%;
}
.bn8 {
background-color: rgb(255, 255, 255);
border: none;
color: rgb(0, 0, 0);
padding: 12px 16px;
font-size: 16px;
font-family: "Roboto", sans-serif;
cursor: pointer;
}
.bn9 {
padding: 2px;
outline: 0;
font-size: 17px;
color: rgb(0, 0, 0);
background: -webkit-gradient(
linear,
left top,
right top,
from(#fdde5c),
color-stop(#f8ab5e),
color-stop(#f56a62),
color-stop(#a176c8),
color-stop(#759beb),
color-stop(#65beb3),
to(#70db96)
);
background: linear-gradient(
to right,
#fdde5c,
#f8ab5e,
#f56a62,
#a176c8,
#759beb,
#65beb3,
#70db96
);
border-radius: 30px;
border: 0;
box-shadow: none;
cursor: pointer;
}
.bn9 > span {
display: block;
padding: 10px 40px;
font-size: 17px;
font-weight: 500;
background: #ebebeb;
border-radius: 30px;
}
a.bn11 {
display: inline-block;
padding: 0.5em 1.7em;
margin: 0 0.1em 0.1em 0;
border: 0.16em solid rgba(255, 255, 255, 0);
background-color: rgb(80, 10, 172);
border-radius: 2em;
box-sizing: border-box;
text-decoration: none;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #ffffff;
text-shadow: 0 0.04em 0.04em rgba(0, 0, 0, 0.35);
text-align: center;
transition: all 0.2s;
}
a.bn11:hover {
border-color: rgb(255, 255, 255);
}
.bn13 {
display: inline-block;
padding: 0.65em 1.6em;
border: 3px solid #ffffff;
margin: 0 0.3em 0.3em 0;
border-radius: 0.12em;
box-sizing: border-box;
text-decoration: none;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #ffffff;
text-align: center;
transition: all 0.2s;
animation: bn13bouncy 5s infinite linear;
position: relative;
}
.bn13:hover {
background-color: white;
color: #000000;
}
@keyframes bn13bouncy {
0% {
top: 0em;
}
40% {
top: 0em;
}
43% {
top: -0.9em;
}
46% {
top: 0em;
}
48% {
top: -0.4em;
}
50% {
top: 0em;
}
100% {
top: 0em;
}
}
.bn14 {
font-family: lato, sans-serif;
font-weight: bold;
font-size: 1em;
letter-spacing: 0.1em;
text-decoration: none;
color: #ffffff;
display: inline-block;
padding: 10px 40px 10px 40px;
position: relative;
border: 3px solid #ffffff;
}
.bn15 {
font-family: lato, sans-serif;
font-weight: bold;
font-size: 1em;
letter-spacing: 0.1em;
text-decoration: none;
color: #ffffff;
display: inline-block;
padding: 10px 40px 10px 40px;
position: relative;
border: 3px solid #ffffff;
border-radius: 10px;
}
.bn16 {
font-family: lato, sans-serif;
font-weight: bold;
font-size: 1em;
letter-spacing: 0.1em;
text-decoration: none;
color: #ffffff;
display: inline-block;
padding: 10px 40px 10px 40px;
position: relative;
border: 3px solid #ffffff;
border-radius: 25px;
}
.bn17 {
font-family: lato, sans-serif;
font-weight: bold;
font-size: 1em;
letter-spacing: 0.1em;
text-decoration: none;
color: #ffffff;
display: inline-block;
padding: 10px 40px 10px 40px;
position: relative;
border: 3px solid #ffffff;
border-radius: 20px;
}
.bn632-hover {
width: 150px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
height: 55px;
text-align: center;
border: none;
background-size: 300% 100%;
border-radius: 50px;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.bn632-hover:hover {
background-position: 100% 0;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.bn632-hover:focus {
outline: none;
}
.bn632-hover.bn18 {
background-image: linear-gradient(
to right,
#25aae1,
#40e495,
#30dd8a,
#2bb673
);
box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}
.bn632-hover.bn19 {
background-image: linear-gradient(
to right,
#f5ce62,
#e43603,
#fa7199,
#e85a19
);
box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}
.bn632-hover.bn20 {
background-image: linear-gradient(
to right,
#667eea,
#764ba2,
#6b8dd6,
#8e37d7
);
box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}
.bn632-hover.bn21 {
background-image: linear-gradient(
to right,
#fc6076,
#ff9a44,
#ef9d43,
#e75516
);
box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
}
.bn632-hover.bn22 {
background-image: linear-gradient(
to right,
#0ba360,
#3cba92,
#30dd8a,
#2bb673
);
box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
}
.bn632-hover.bn23 {
background-image: linear-gradient(
to right,
#009245,
#fcee21,
#00a8c5,
#d9e021
);
box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
}
.bn632-hover.bn24 {
background-image: linear-gradient(
to right,
#6253e1,
#852d91,
#a3a1ff,
#f24645
);
box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
}
.bn632-hover.bn25 {
background-image: linear-gradient(
to right,
#29323c,
#485563,
#2b5876,
#4e4376
);
box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}
.bn632-hover.bn26 {
background-image: linear-gradient(
to right,
#25aae1,
#4481eb,
#04befe,
#3f86ed
);
box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}
.bn632-hover.bn27 {
background-image: linear-gradient(
to right,
#ed6ea0,
#ec8c69,
#f7186a,
#fbb03b
);
box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}
.bn632-hover.bn28 {
background-image: linear-gradient(
to right,
#eb3941,
#f15e64,
#e14e53,
#e2373f
);
box-shadow: 0 5px 15px rgba(242, 97, 103, 0.4);
}
.bn29 {
border: none;
padding: 0.8em 2.5em;
outline: none;
color: white;
font-style: 1.2em;
font-size: large;
position: relative;
z-index: 1;
cursor: pointer;
background: none;
text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.45);
}
.bn29:before,
.bn29:after {
position: absolute;
top: 50%;
left: 50%;
border-radius: 10em;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 105%;
height: 105%;
content: "";
z-index: -2;
background-size: 400% 400%;
background: linear-gradient(
60deg,
#f79533,
#f37055,
#ef4e7b,
#a166ab,
#5073b8,
#1098ad,
#07b39b,
#6fba82
);
}
.bn29:before {
-webkit-filter: blur(7px);
filter: blur(7px);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-animation: pulse 10s infinite ease;
animation: pulse 10s infinite ease;
}
.bn29:after {
-webkit-filter: blur(0.3px);
filter: blur(0.3px);
}
.bn29:hover:before {
width: 115%;
height: 115%;
}
.bn30 {
border: 5em;
cursor: pointer;
outline: none;
font-size: 16px;
-webkit-transform: translate(0);
transform: translate(0);
background-image: linear-gradient(45deg, #4568dc, #b06ab3);
padding: 0.7em 2em;
border-radius: 65px;
box-shadow: 1px 1px 10px rgba(255, 255, 255, 0.438);
-webkit-transition: box-shadow 0.25s;
transition: box-shadow 0.25s;
color: white;
}
.bn30 .text {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(45deg, #4568dc, #b06ab3);
}
.bn30:after {
content: "";
border-radius: 18px;
position: absolute;
margin: 4px;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
background: #0e0e10;
}
.bn30:hover {
background-image: linear-gradient(-45deg, #4568dc, #b06ab3);
box-shadow: 0 12px 24px rgba(128, 128, 128, 0.1);
}
.bn30:hover .text {
background-image: linear-gradient(-45deg, #4568dc, #b06ab3);
}
.bn31 {
background-image: linear-gradient(to right, #006175 0%, #00a950 100%);
border-radius: 40px;
box-sizing: border-box;
color: #00a84f;
display: block;
height: 50px;
font-size: 1.4em;
padding: 4px;
position: relative;
text-decoration: none;
width: 7em;
z-index: 2;
}
.bn31:hover {
color: #fff;
}
.bn31 .bn31span {
align-items: center;
background: #0e0e10;
border-radius: 40px;
display: flex;
justify-content: center;
height: 100%;
transition: background 0.5s ease;
width: 100%;
}
.bn31:hover .bn31span {
background: transparent;
}
.bn32 {
border-color: #ffffff;
padding: 0.6em 2.3em;
cursor: pointer;
font-size: 1em;
color: #ffffff;
background-image: linear-gradient(45deg, transparent 50%, #000000 50%);
background-position: 25%;
background-size: 400%;
-webkit-transition: background 500ms ease-in-out, color 500ms ease-in-out;
transition: background 500ms ease-in-out, color 500ms ease-in-out;
}
.bn32:hover {
color: #ffffff;
background-position: 100%;
}
.bn33 {
border: 5em;
cursor: pointer;
outline: none;
font-size: 16px;
-webkit-transform: translate(0);
transform: translate(0);
background-image: linear-gradient(45deg, #4568dc, #b06ab3);
padding: 0.7em 2em;
border-radius: 1px;
box-shadow: 1px 1px 10px rgba(255, 255, 255, 0.438);
-webkit-transition: box-shadow 0.25s;
transition: box-shadow 0.25s;
color: white;
}
.bn34 {
background: none;
cursor: pointer;
text-decoration: inherit;
font-size: 1rem;
color: white;
padding: 0.7rem 2rem;
border-image-slice: 1;
border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}
.bn35 {
text-decoration: underline;
}
.bn3637 {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.7rem 2rem;
font-weight: 700;
font-size: 18px;
text-align: center;
text-decoration: none;
color: #fff;
backface-visibility: hidden;
border: 0.3rem solid transparent;
border-radius: 3rem;
}
.bn36 {
border-color: #fff;
transition: transform 0.2s cubic-bezier(0.235, 0, 0.05, 0.95);
}
.bn36:hover {
transform: perspective(1px) scale3d(1.044, 1.044, 1) translateZ(0) !important;
}
.bn37 {
border-color: transparent;
background-color: #fff;
color: #000;
transition: transform 0.2s cubic-bezier(0.235, 0, 0.05, 0.95);
}
.bn37:hover {
transform: perspective(1px) scale3d(1.044, 1.044, 1) translateZ(0) !important;
}
.bn38 {
border-color: transparent;
transition: background-color 0.3s ease-in-out;
}
.bn38:hover {
background-color: #60605e;
}
.bn39 {
background-image: linear-gradient(135deg, #008aff, #86d472);
border-radius: 6px;
box-sizing: border-box;
color: #ffffff;
display: block;
height: 50px;
font-size: 1.4em;
font-weight: 600;
padding: 4px;
position: relative;
text-decoration: none;
width: 7em;
z-index: 2;
}
.bn39:hover {
color: #fff;
}
.bn39 .bn39span {
align-items: center;
background: #0e0e10;
border-radius: 6px;
display: flex;
justify-content: center;
height: 100%;
transition: background 0.5s ease;
width: 100%;
}
.bn39:hover .bn39span {
background: transparent;
}
.bn40 {
border-radius: 4px;
font-weight: 600;
font-size: large;
padding: 4px 6px;
color: #fff !important;
}
.bn40::after {
max-width: 100%;
height: 2px;
display: block;
content: "";
background: linear-gradient(-90deg, #ff9100 0%, #f10366 50%, #6173ff 100%);
opacity: 1;
margin-bottom: -6px;
margin-top: 1px;
}
.bn40div {
display: flex;
}
.btn41-43 {
padding: 10px 25px;
font-family: "Roboto", sans-serif;
font-weight: 500;
background: transparent;
outline: none !important;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
}
.btn-41 {
border: 2px solid rgb(255, 255, 255);
z-index: 1;
color: white;
}
.btn-41:after {
position: absolute;
content: "";
width: 0;
height: 100%;
top: 0;
left: 0;
direction: rtl;
z-index: -1;
background: rgb(255, 255, 255);
transition: all 0.3s ease;
}
.btn-41:hover {
color: rgb(0, 0, 0);
}
.btn-41:hover:after {
left: auto;
right: 0;
width: 100%;
}
.btn-41:active {
top: 2px;
}
.btn-42 {
border: 2px solid rgb(255, 255, 255);
z-index: 1;
color: white;
}
.btn-42:after {
position: absolute;
content: "";
width: 100%;
height: 0;
bottom: 0;
left: 0;
z-index: -1;
background: rgb(255, 255, 255);
transition: all 0.3s ease;
}
.btn-42:hover {
color: rgb(0, 0, 0);
}
.btn-42:hover:after {
top: 0;
height: 100%;
}
.btn-42:active {
top: 2px;
}
.btn-43 {
border: 2px solid rgb(255, 255, 255);
z-index: 1;
color: white;
}
.btn-43:after {
position: absolute;
content: "";
width: 100%;
height: 0;
top: 0;
left: 0;
z-index: -1;
background: rgb(255, 255, 255);
transition: all 0.3s ease;
}
.btn-43:hover {
color: rgb(0, 0, 0);
}
.btn-43:hover:after {
top: auto;
bottom: 0;
height: 100%;
}
.bn44 {
width: 160px;
height: 60px;
}
.bn45 {
width: 170px;
height: 50px;
}
.bn46 {
width: 150px;
height: 50px;
}
.bn47 {
position: relative;
padding: 1rem 2rem 0.5rem 2.5rem;
color: #000000;
border: 3px solid #776e62;
-webkit-transition: padding 0.3s ease-in-out;
transition: padding 0.3s ease-in-out;
}
.bn47:before {
content: "";
position: absolute;
top: 0.5rem;
left: 0.5rem;
z-index: -1;
height: 100%;
width: 100%;
background-color: #ffffff;
border-right: 3px solid #ffffff;
border-bottom: 3px solid #ffffff;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.bn47:hover {
padding: 0.75rem 2.25rem;
}
.bn47:hover:before {
top: 0;
left: 0;
}
.bn48 {
background: linear-gradient(90deg, #1e39a5, #c50e07);
background-size: auto;
background-clip: border-box;
-webkit-background-clip: text;
background-clip: text;
background-size: 300% 300%;
-webkit-text-fill-color: transparent;
}
.bn49 {
border: 0;
text-align: center;
display: inline-block;
padding: 14px;
width: 150px;
margin: 7px;
color: #ffffff;
background-color: #36a2eb;
border-radius: 8px;
font-family: "proxima-nova-soft", sans-serif;
font-weight: 600;
text-decoration: none;
transition: box-shadow 200ms ease-out;
}
.bn53 {
background-color: #b81515;
padding: 7px;
width: 100px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
animation: bn53bounce 4s infinite;
cursor: pointer;
}
@keyframes bn53bounce {
5%,
50% {
transform: scale(1);
}
10% {
transform: scale(1);
}
15% {
transform: scale(1);
}
20% {
transform: scale(1) rotate(-5deg);
}
25% {
transform: scale(1) rotate(5deg);
}
30% {
transform: scale(1) rotate(-3deg);
}
35% {
transform: scale(1) rotate(2deg);
}
40% {
transform: scale(1) rotate(0);
}
}
.bn54 {
position: relative;
outline: none;
text-decoration: none;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
text-transform: uppercase;
height: 45px;
width: 130px;
opacity: 1;
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.6);
}
.bn54 .bn54span {
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #000000;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.7px;
}
.bn54:hover {
animation: bn54rotate 0.7s ease-in-out both;
}
.bn54:hover .bn54span {
animation: bn54storm 0.7s ease-in-out both;
animation-delay: 0.06s;
}
@keyframes bn54rotate {
0% {
transform: rotate(0deg) translate3d(0, 0, 0);
}
25% {
transform: rotate(3deg) translate3d(0, 0, 0);
}
50% {
transform: rotate(-3deg) translate3d(0, 0, 0);
}
75% {
transform: rotate(1deg) translate3d(0, 0, 0);
}
100% {
transform: rotate(0deg) translate3d(0, 0, 0);
}
}
@keyframes bn54storm {
0% {
transform: translate3d(0, 0, 0) translateZ(0);
}
25% {
transform: translate3d(4px, 0, 0) translateZ(0);
}
50% {
transform: translate3d(-3px, 0, 0) translateZ(0);
}
75% {
transform: translate3d(2px, 0, 0) translateZ(0);
}
100% {
transform: translate3d(0, 0, 0) translateZ(0);
}
}
.bn59 {
background-color: #141414;
border: 1px solid rgba(54, 54, 54, 0.6);
font-weight: 600;
position: relative;
outline: none;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
height: 45px;
width: 130px;
opacity: 1;
}
.bn60 {
background-color: #190c8d;
color: #ffffff;
font-weight: 600;
position: relative;
outline: none;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
height: 3em;
width: 7em;
}
.bn62 {
color: #1cc49d;
background-color: #1b2f31;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
height: 3em;
width: 8em;
font-size: large;
font-weight: 600;
}
/** Button End **/
================================================
FILE: tailwind.config.js
================================================
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
================================================
FILE: tsconfig.json
================================================
{
"compilerOptions": {
"target": "es5",
"paths": {
"@/components/*": ["./components/*"],
"@/styles/*": ["./styles/*"],
"@/public/*": ["./public/*"],
"@/public/images*": ["./public/images*"],
},
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"incremental": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
, "scripts/generate-sitemap.js", "utils/analytics.js" ],
"exclude": [
"node_modules"
]
}
================================================
FILE: utils/analytics.js
================================================
import ReactGA from "react-ga";
require("dotenv").config();
export const initGA = () => {
// https://gyazo.com/3101aeec0a80c2e637e8856449ddf071 Select these settings when you are setting up your analytics to get a tracking ID
ReactGA.initialize(process.env.REACT_APP_GA_ENV);
};
export const logPageView = () => {
ReactGA.set({ page: window.location.pathname });
ReactGA.pageview(window.location.pathname);
};
export const logEvent = (category = "", action = "") => {
if (category && action) {
ReactGA.event({ category, action });
}
};
export const logException = (description = "", fatal = false) => {
if (description) {
ReactGA.exception({ description, fatal });
}
};
gitextract_k5fhr9_x/
├── .eslintrc.json
├── .gitignore
├── README.md
├── components/
│ ├── Buttons/
│ │ └── Buttons.tsx
│ ├── LayoutGA.js
│ └── Sidebar/
│ └── Sidebar.tsx
├── next-env.d.ts
├── next.config.js
├── package.json
├── pages/
│ ├── _app.tsx
│ ├── _document.tsx
│ ├── buttons/
│ │ ├── 0.tsx
│ │ ├── 1.tsx
│ │ ├── 10.tsx
│ │ ├── 11.tsx
│ │ ├── 12.tsx
│ │ ├── 13.tsx
│ │ ├── 14.tsx
│ │ ├── 15.tsx
│ │ ├── 16.tsx
│ │ ├── 17.tsx
│ │ ├── 18.tsx
│ │ ├── 19.tsx
│ │ ├── 2.tsx
│ │ ├── 20.tsx
│ │ ├── 21.tsx
│ │ ├── 22.tsx
│ │ ├── 23.tsx
│ │ ├── 24.tsx
│ │ ├── 25.tsx
│ │ ├── 26.tsx
│ │ ├── 27.tsx
│ │ ├── 28.tsx
│ │ ├── 29.tsx
│ │ ├── 3.tsx
│ │ ├── 30.tsx
│ │ ├── 31.tsx
│ │ ├── 32.tsx
│ │ ├── 33.tsx
│ │ ├── 34.tsx
│ │ ├── 35.tsx
│ │ ├── 36.tsx
│ │ ├── 37.tsx
│ │ ├── 38.tsx
│ │ ├── 39.tsx
│ │ ├── 4.tsx
│ │ ├── 40.tsx
│ │ ├── 41.tsx
│ │ ├── 42.tsx
│ │ ├── 43.tsx
│ │ ├── 44.tsx
│ │ ├── 45.tsx
│ │ ├── 46.tsx
│ │ ├── 47.tsx
│ │ ├── 48.tsx
│ │ ├── 49.tsx
│ │ ├── 5.tsx
│ │ ├── 50.tsx
│ │ ├── 51.tsx
│ │ ├── 52.tsx
│ │ ├── 53.tsx
│ │ ├── 54.tsx
│ │ ├── 55.tsx
│ │ ├── 56.tsx
│ │ ├── 57.tsx
│ │ ├── 58.tsx
│ │ ├── 59.tsx
│ │ ├── 6.tsx
│ │ ├── 60.tsx
│ │ ├── 61.tsx
│ │ ├── 62.tsx
│ │ ├── 7.tsx
│ │ ├── 8.tsx
│ │ └── 9.tsx
│ └── index.tsx
├── postcss.config.js
├── public/
│ └── ads.txt
├── scripts/
│ └── generate-sitemap.js
├── styles/
│ └── globals.css
├── tailwind.config.js
├── tsconfig.json
└── utils/
└── analytics.js
SYMBOL INDEX (71 symbols across 69 files)
FILE: components/Buttons/Buttons.tsx
function Viewer (line 3) | function Viewer() {
FILE: components/LayoutGA.js
class Layout (line 4) | class Layout extends React.Component {
method componentDidMount (line 5) | componentDidMount() {
method render (line 12) | render() {
FILE: components/Sidebar/Sidebar.tsx
function Sidebar (line 3) | function Sidebar() {
FILE: pages/_app.tsx
function MyApp (line 6) | function MyApp({ Component, pageProps }) {
FILE: pages/_document.tsx
function document (line 4) | function document() {
FILE: pages/buttons/0.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/1.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/10.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/11.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/12.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/13.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/14.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/15.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/16.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/17.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/18.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/19.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/2.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/20.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/21.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/22.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/23.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/24.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/25.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/26.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/27.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/28.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/29.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/3.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/30.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/31.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/32.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/33.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/34.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/35.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/36.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/37.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/38.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/39.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/4.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/40.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/41.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/42.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/43.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/44.tsx
function Button (line 2) | function Button() {
FILE: pages/buttons/45.tsx
function Button (line 2) | function Button() {
FILE: pages/buttons/46.tsx
function Button (line 2) | function Button() {
FILE: pages/buttons/47.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/48.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/49.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/5.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/50.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/51.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/52.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/53.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/54.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/55.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/56.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/57.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/58.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/59.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/6.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/60.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/61.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/62.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/7.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/8.tsx
function Button (line 1) | function Button() {
FILE: pages/buttons/9.tsx
function Button (line 1) | function Button() {
FILE: pages/index.tsx
function Home (line 4) | function Home() {
Condensed preview — 82 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (180K chars).
[
{
"path": ".eslintrc.json",
"chars": 127,
"preview": "{\n \"extends\": \"next/core-web-vitals\",\n \"rules\": {\n \"@next/next/no-html-link-for-pages\": [\"error\", \"/my-app/pages/\"]"
},
{
"path": ".gitignore",
"chars": 386,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "README.md",
"chars": 2263,
"preview": "<h1 align=\"center\">cssbuttons.app</h1> \n<h3 align=\"center\">Button collection with a focus on simplicity and ease of use."
},
{
"path": "components/Buttons/Buttons.tsx",
"chars": 12849,
"preview": "/* eslint-disable @next/next/no-html-link-for-pages */\n/* eslint-disable @next/next/no-img-element */\nexport default fun"
},
{
"path": "components/LayoutGA.js",
"chars": 343,
"preview": "import React from \"react\";\nimport { initGA, logPageView } from \"../utils/analytics\";\n\nexport default class Layout extend"
},
{
"path": "components/Sidebar/Sidebar.tsx",
"chars": 2479,
"preview": "import Link from \"next/link\";\n\nexport default function Sidebar() {\n return (\n <div id=\"panel\">\n <div id=\"header"
},
{
"path": "next-env.d.ts",
"chars": 201,
"preview": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edite"
},
{
"path": "next.config.js",
"chars": 231,
"preview": "module.exports = {\n reactStrictMode: true,\n env: {\n REACT_APP_GA_ENV: process.env.REACT_APP_GA_ENV,\n },\n webpack:"
},
{
"path": "package.json",
"chars": 562,
"preview": "{\n \"name\": \"cssbuttons\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start"
},
{
"path": "pages/_app.tsx",
"chars": 1080,
"preview": "import \"../styles/globals.css\";\nimport LayoutGA from \"../components/LayoutGA\";\nimport Head from \"next/head\";\nimport Side"
},
{
"path": "pages/_document.tsx",
"chars": 595,
"preview": "/* eslint-disable @next/next/no-sync-scripts */\nimport { Html, Head, Main, NextScript } from \"next/document\";\n\nfunction "
},
{
"path": "pages/buttons/0.tsx",
"chars": 1143,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/1.tsx",
"chars": 1589,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/10.tsx",
"chars": 1486,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/11.tsx",
"chars": 1688,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/12.tsx",
"chars": 1522,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/13.tsx",
"chars": 1889,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/14.tsx",
"chars": 1497,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/15.tsx",
"chars": 1497,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/16.tsx",
"chars": 1497,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/17.tsx",
"chars": 1497,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/18.tsx",
"chars": 2197,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/19.tsx",
"chars": 2196,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/2.tsx",
"chars": 1414,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/20.tsx",
"chars": 2197,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/21.tsx",
"chars": 2198,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/22.tsx",
"chars": 2197,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/23.tsx",
"chars": 2196,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/24.tsx",
"chars": 2174,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/25.tsx",
"chars": 2195,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/26.tsx",
"chars": 2197,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/27.tsx",
"chars": 2198,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/28.tsx",
"chars": 2194,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/29.tsx",
"chars": 2331,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/3.tsx",
"chars": 1657,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/30.tsx",
"chars": 2214,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/31.tsx",
"chars": 1962,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/32.tsx",
"chars": 1805,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/33.tsx",
"chars": 1737,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/34.tsx",
"chars": 1470,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/35.tsx",
"chars": 1275,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/36.tsx",
"chars": 1766,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/37.tsx",
"chars": 1816,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/38.tsx",
"chars": 1667,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/39.tsx",
"chars": 1871,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/4.tsx",
"chars": 1534,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/40.tsx",
"chars": 1685,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/41.tsx",
"chars": 1920,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/42.tsx",
"chars": 1890,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/43.tsx",
"chars": 1871,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/44.tsx",
"chars": 1609,
"preview": "/* eslint-disable @next/next/no-img-element */\nfunction Button() {\n return (\n <>\n <div id=\"viewer\">\n <di"
},
{
"path": "pages/buttons/45.tsx",
"chars": 1705,
"preview": "/* eslint-disable @next/next/no-img-element */\nfunction Button() {\n return (\n <>\n <div id=\"viewer\">\n <di"
},
{
"path": "pages/buttons/46.tsx",
"chars": 1612,
"preview": "/* eslint-disable @next/next/no-img-element */\nfunction Button() {\n return (\n <>\n <div id=\"viewer\">\n <di"
},
{
"path": "pages/buttons/47.tsx",
"chars": 1917,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/48.tsx",
"chars": 1467,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/49.tsx",
"chars": 1538,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/5.tsx",
"chars": 2354,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/50.tsx",
"chars": 1412,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/51.tsx",
"chars": 1450,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/52.tsx",
"chars": 1450,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/53.tsx",
"chars": 1834,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/54.tsx",
"chars": 2767,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/55.tsx",
"chars": 2061,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/56.tsx",
"chars": 3468,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/57.tsx",
"chars": 1610,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/58.tsx",
"chars": 1602,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/59.tsx",
"chars": 1519,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/6.tsx",
"chars": 1845,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/60.tsx",
"chars": 1500,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/61.tsx",
"chars": 1642,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/62.tsx",
"chars": 1447,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/7.tsx",
"chars": 1418,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/8.tsx",
"chars": 1722,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/buttons/9.tsx",
"chars": 2055,
"preview": "function Button() {\n return (\n <>\n <div id=\"viewer\">\n <div className=\"px-4 py-8\">\n <h2 classNam"
},
{
"path": "pages/index.tsx",
"chars": 457,
"preview": "import Head from \"next/head\";\nimport Buttons from \"../components/Buttons/Buttons\";\n\nexport default function Home() {\n r"
},
{
"path": "postcss.config.js",
"chars": 82,
"preview": "module.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n"
},
{
"path": "public/ads.txt",
"chars": 58,
"preview": "google.com, pub-6099445439299322, DIRECT, f08c47fec0942fa0"
},
{
"path": "scripts/generate-sitemap.js",
"chars": 994,
"preview": "const fs = require(\"fs\");\n\nconst globby = require(\"globby\");\nconst prettier = require(\"prettier\");\n\n(async () => {\n con"
},
{
"path": "styles/globals.css",
"chars": 27294,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:"
},
{
"path": "tailwind.config.js",
"chars": 164,
"preview": "module.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n them"
},
{
"path": "tsconfig.json",
"chars": 797,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"paths\": {\n \"@/components/*\": [\"./components/*\"],\n \"@/styles"
},
{
"path": "utils/analytics.js",
"chars": 699,
"preview": "import ReactGA from \"react-ga\";\n\nrequire(\"dotenv\").config();\n\nexport const initGA = () => {\n // https://gyazo.com/3101a"
}
]
About this extraction
This page contains the full source code of the r1/cssbuttons GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 82 files (162.1 KB), approximately 50.7k tokens, and a symbol index with 71 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.