Components

Tailwind CSS Buttons - Madhuranjan UI

Enhance your UI with our beautifully crafted Tailwind CSS buttons. Whether you need solid, outline, gradient, or interactive buttons, our collection is fully responsive and optimized for modern web applications optimized for Dark and Light.

Discover our extensive library featuring over 150 unique button styles and nearly 200 variants designed to elevate your web interface. Our diverse collection covers default, pill, gradient, outline, hover, and interactive buttons all optimized for both dark and light themes to enhance user experience and SEO performance.

Default Buttons

Our default buttons provide a clean and versatile design that fits any modern web interface. They are built for responsiveness and work seamlessly on both dark and light themes.

1<!-- Make sure Tailwind is properly set up (including dark mode). 
2     Example: <html class="dark"> or <body class="dark"> to test dark theme. -->
3
4<div class="flex flex-wrap items-center gap-2 p-4 bg-white text-neutral-900 dark:bg-neutral-900 dark:text-neutral-100">
5
6  <!-- Amber -->
7  <button type="button"
8    class="text-white bg-amber-700 hover:bg-amber-800 focus:ring-4 focus:ring-amber-300 
9           font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2
10           dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-amber-800">

Pills Buttons

Pills buttons feature a smooth, rounded design that adds a modern touch to your UI. Their compact shape and responsive styling make them perfect for any layout.

1<!DOCTYPE html>
2<html lang="en" class="dark">
3<head>
4  <meta charset="UTF-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6  <!-- Tailwind CSS -->
7  <script src="https://cdn.tailwindcss.com"></script>
8</head>
9<body class="bg-white text-gray-800 dark:bg-gray-900 dark:text-gray-100">
10  <div class="p-4 flex flex-wrap gap-2">

Gradient MonoChrome

Experience sleek monochrome gradients that deliver a subtle yet striking visual impact. These buttons blend smooth transitions with minimalist design for a professional look.

1<div class="flex flex-wrap gap-2 p-4">
2  <button class="rounded-md border-1 border-transparent bg-gradient-to-br from-blue-500 to-red-500 px-5 py-2.5 text-sm font-medium text-white transition-all duration-200 [border-image-slice:1] [border-image-source:_linear-gradient(to_bottom_right,_#3b82f6,_#ef4444)] hover:from-red-500 hover:to-blue-500 focus:ring-2 focus:ring-blue-100 focus:outline-none active:scale-95 active:border-[1px] dark:focus:ring-blue-800">Button 1</button>
3  <button class="rounded-md border-2 border-transparent bg-gradient-to-br from-green-500 to-lime-500 px-5 py-2.5 text-sm font-medium text-white transition-all duration-200 [border-image-slice:1] [border-image-source:_linear-gradient(to_bottom_right,_#10b981,_#84cc16)] hover:from-lime-500 hover:to-green-500 focus:ring-2 focus:ring-green-300 focus:outline-none active:scale-95 active:border-[1px] dark:focus:ring-green-800">Button 2</button>
4  <button class="rounded-md border-2 border-transparent bg-gradient-to-br from-purple-500 to-pink-500 px-5 py-2.5 text-sm font-medium text-white transition-all duration-200 [border-image-slice:1] [border-image-source:_linear-gradient(to_bottom_right,_#a855f7,_#ec4899)] hover:from-pink-500 hover:to-purple-500 focus:ring-2 focus:ring-purple-300 focus:outline-none active:scale-95 active:border-[1px] dark:focus:ring-pink-800">Button 3</button>
5  <button class="rounded-md border-2 border-transparent bg-gradient-to-br from-orange-500 to-yellow-500 px-5 py-2.5 text-sm font-medium text-white transition-all duration-200 [border-image-slice:1] [border-image-source:_linear-gradient(to_bottom_right,_#f97316,_#f59e0b)] hover:from-yellow-500 hover:to-orange-500 focus:ring-2 focus:ring-orange-300 focus:outline-none active:scale-95 active:border-[1px] dark:focus:ring-yellow-800">Button 4</button>
6  <button class="rounded-md border-2 border-transparent bg-gradient-to-br from-teal-500 to-cyan-500 px-5 py-2.5 text-sm font-medium text-white transition-all duration-200 [border-image-slice:1] [border-image-source:_linear-gradient(to_bottom_right,_#14b8a6,_#06b6d4)] hover:from-cyan-500 hover:to-teal-500 focus:ring-2 focus:ring-cyan-300 focus:outline-none active:scale-95 active:border-[1px] dark:focus:ring-teal-800">Button 5</button>
7  <button class="rounded-md border-2 border-transparent bg-gradient-to-br from-rose-500 to-fuchsia-500 px-5 py-2.5 text-sm font-medium text-white transition-all duration-200 [border-image-slice:1] [border-image-source:_linear-gradient(to_bottom_right,_#f43f5e,_#d946ef)] hover:from-fuchsia-500 hover:to-rose-500 focus:ring-2 focus:ring-rose-300 focus:outline-none active:scale-95 active:border-[1px] dark:focus:ring-fuchsia-800">Button 6</button>
8  <button class="rounded-md border-2 border-transparent bg-gradient-to-br from-gray-500 to-slate-500 px-5 py-2.5 text-sm font-medium text-white transition-all duration-200 [border-image-slice:1] [border-image-source:_linear-gradient(to_bottom_right,_#737373,_#64748b)] hover:from-slate-500 hover:to-gray-500 focus:ring-2 focus:ring-gray-300 focus:outline-none active:scale-95 active:border-[1px] dark:focus:ring-slate-800">Button 7</button>
9  <button class="rounded-md border-2 border-transparent bg-gradient-to-br from-sky-500 to-blue-700 px-5 py-2.5 text-sm font-medium text-white transition-all duration-200 [border-image-slice:1] [border-image-source:_linear-gradient(to_bottom_right,_#0ea5e9,_#1d4ed8)] hover:from-blue-700 hover:to-sky-500 focus:ring-2 focus:ring-sky-300 focus:outline-none active:scale-95 active:border-[1px] dark:focus:ring-blue-900">Button 8</button>
10  <button class="rounded-md border-2 border-transparent bg-gradient-to-br from-zinc-500 to-neutral-500 px-5 py-2.5 text-sm font-medium text-white transition-all duration-200 [border-image-slice:1] [border-image-source:_linear-gradient(to_bottom_right,_#71717a,_#737373)] hover:from-neutral-500 hover:to-zinc-500 focus:ring-2 focus:ring-zinc-300 focus:outline-none active:scale-95 active:border-[1px] dark:focus:ring-neutral-800">Button 9</button>

Gradient DuoTone

DuoTone gradient buttons deliver a dynamic blend of two colors that shift beautifully on hover, offering an engaging and interactive user experience.

1<div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-gray-900">
2<button type="button" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-purple-500 to-blue-500 rounded-md hover:opacity-90 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all active:scale-95">Button 1</button>
3<button type="button" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-cyan-500 to-blue-500 rounded-md hover:opacity-90 focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800 transition-all active:scale-95">Button 2</button>
4<button type="button" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-green-500 to-blue-500 rounded-md hover:opacity-90 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-800 transition-all active:scale-95">Button 3</button>
5<button type="button" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-purple-500 to-pink-500 rounded-md hover:opacity-90 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800 transition-all active:scale-95">Button 4</button>
6<button type="button" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-pink-500 to-orange-500 rounded-md hover:opacity-90 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-800 transition-all active:scale-95">Button 5</button>
7<button type="button" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-teal-500 to-lime-500 rounded-md hover:opacity-90 focus:outline-none focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-800 transition-all active:scale-95">Button 6</button>
8<button type="button" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-red-500 to-yellow-500 rounded-md hover:opacity-90 focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800 transition-all active:scale-95">Button 7</button>
9<button type="button" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-indigo-500 to-violet-500 rounded-md hover:opacity-90 focus:outline-none focus:ring-4 focus:ring-violet-300 dark:focus:ring-violet-800 transition-all active:scale-95">Button 8</button>
10<button type="button" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-fuchsia-500 to-pink-500 rounded-md hover:opacity-90 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800 transition-all active:scale-95">Button 9</button>

Gradient Outline

These gradient outline buttons feature a striking border effect that transforms on hover, highlighting the button’s interactive nature while maintaining a modern aesthetic.

1<div class="flex flex-wrap gap-3 p-4">
2  <button class="group relative me-2 mb-2 inline-flex items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-red-500 to-blue-500 p-0.5 text-sm font-semibold tracking-wide dark:text-white text-black hover:text-white uppercase group-hover:from-blue-500 group-hover:to-red-500 hover:shadow-lg hover:shadow-blue-500/50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:focus:ring-red-800"><span class="relative rounded-md bg-white px-6 py-3 transition-all duration-100 ease-in group-hover:bg-transparent dark:bg-gray-900 group-hover:dark:bg-transparent">Red to Blue</span></button>
3  <button class="group relative me-2 mb-2 inline-flex items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-green-500 to-lime-500 p-0.5 text-sm font-semibold tracking-wide dark:text-white text-black hover:text-white uppercase group-hover:from-lime-500 group-hover:to-green-500 hover:shadow-lg hover:shadow-lime-500/50 focus:ring-4 focus:ring-green-300 focus:outline-none dark:focus:ring-lime-800"><span class="relative rounded-md bg-white px-6 py-3 transition-all duration-100 ease-in group-hover:bg-transparent dark:bg-gray-900 group-hover:dark:bg-transparent">Green to Lime</span></button>
4  <button class="group relative me-2 mb-2 inline-flex items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-purple-600 to-pink-500 p-0.5 text-sm font-semibold tracking-wide dark:text-white text-black hover:text-white uppercase group-hover:from-pink-500 group-hover:to-purple-600 hover:shadow-lg hover:shadow-pink-500/50 focus:ring-4 focus:ring-purple-300 focus:outline-none dark:focus:ring-pink-800"><span class="relative rounded-md bg-white px-6 py-3 transition-all duration-100 ease-in group-hover:bg-transparent dark:bg-gray-900 group-hover:dark:bg-transparent">Purple to Pink</span></button>
5  <button class="group relative me-2 mb-2 inline-flex items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-orange-500 to-yellow-500 p-0.5 text-sm font-semibold tracking-wide dark:text-white text-black hover:text-white uppercase group-hover:from-yellow-500 group-hover:to-orange-500 hover:shadow-lg hover:shadow-yellow-500/50 focus:ring-4 focus:ring-orange-300 focus:outline-none dark:focus:ring-yellow-800"><span class="relative rounded-md bg-white px-6 py-3 transition-all duration-100 ease-in group-hover:bg-transparent dark:bg-gray-900 group-hover:dark:bg-transparent">Orange to Yellow</span></button>
6  <button class="group relative me-2 mb-2 inline-flex items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-teal-500 to-cyan-500 p-0.5 text-sm font-semibold tracking-wide dark:text-white text-black hover:text-white uppercase group-hover:from-cyan-500 group-hover:to-teal-500 hover:shadow-lg hover:shadow-cyan-500/50 focus:ring-4 focus:ring-cyan-300 focus:outline-none dark:focus:ring-teal-800"><span class="relative rounded-md bg-white px-6 py-3 transition-all duration-100 ease-in group-hover:bg-transparent dark:bg-gray-900 group-hover:dark:bg-transparent">Teal to Cyan</span></button>
7  <button class="group relative me-2 mb-2 inline-flex items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-rose-500 to-fuchsia-600 p-0.5 text-sm font-semibold tracking-wide dark:text-white text-black hover:text-white uppercase group-hover:from-fuchsia-600 group-hover:to-rose-500 hover:shadow-lg hover:shadow-fuchsia-500/50 focus:ring-4 focus:ring-rose-300 focus:outline-none dark:focus:ring-fuchsia-800"><span class="relative rounded-md bg-white px-6 py-3 transition-all duration-100 ease-in group-hover:bg-transparent dark:bg-gray-900 group-hover:dark:bg-transparent">Rose to Fuchsia</span></button>
8  <button class="group relative me-2 mb-2 inline-flex items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600 p-0.5 text-sm font-semibold tracking-wide dark:text-white text-black hover:text-white uppercase group-hover:from-blue-600 group-hover:to-indigo-500 hover:shadow-lg hover:shadow-indigo-500/50 focus:ring-4 focus:ring-indigo-300 focus:outline-none dark:focus:ring-blue-800"><span class="relative rounded-md bg-white px-6 py-3 transition-all duration-100 ease-in group-hover:bg-transparent dark:bg-gray-900 group-hover:dark:bg-transparent">Indigo to Blue</span></button>
9  <button class="group relative me-2 mb-2 inline-flex items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-gray-600 to-slate-800 p-0.5 text-sm font-semibold tracking-wide dark:text-white text-black hover:text-white uppercase group-hover:from-slate-800 group-hover:to-gray-600 hover:shadow-lg hover:shadow-gray-500/50 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-slate-800"><span class="relative rounded-md bg-white px-6 py-3 transition-all duration-100 ease-in group-hover:bg-transparent dark:bg-gray-900 group-hover:dark:bg-transparent">Gray to Slate</span></button>
10  <button class="group relative me-2 mb-2 inline-flex items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-sky-500 to-blue-800 p-0.5 text-sm font-semibold tracking-wide dark:text-white text-black hover:text-white uppercase group-hover:from-blue-800 group-hover:to-sky-500 hover:shadow-lg hover:shadow-blue-500/50 focus:ring-4 focus:ring-sky-300 focus:outline-none dark:focus:ring-blue-900"><span class="relative rounded-md bg-white px-6 py-3 transition-all duration-100 ease-in group-hover:bg-transparent dark:bg-gray-900 group-hover:dark:bg-transparent">Sky to Blue</span></button>

Colored-Shadow

Add depth to your design with colored-shadow buttons that cast vibrant shadows. They create a visually striking effect and bring an extra dimension to your interface.

1<div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-gray-900">
2  <button type="button" class="text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-blue-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Blue</button>
3  <button type="button" class="text-white bg-gradient-to-r from-green-500 via-green-600 to-green-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-green-300 dark:focus:ring-green-800 shadow-lg shadow-green-500/50 dark:shadow-green-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Green</button>
4  <button type="button" class="text-white bg-gradient-to-r from-red-500 via-red-600 to-red-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 shadow-lg shadow-red-500/50 dark:shadow-red-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Red</button>
5  <button type="button" class="text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 shadow-lg shadow-purple-500/50 dark:shadow-purple-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Purple</button>
6  <button type="button" class="text-white bg-gradient-to-r from-pink-500 via-pink-600 to-pink-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-pink-300 dark:focus:ring-pink-800 shadow-lg shadow-pink-500/50 dark:shadow-pink-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Pink</button>
7  <button type="button" class="text-white bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-yellow-300 dark:focus:ring-yellow-800 shadow-lg shadow-yellow-500/50 dark:shadow-yellow-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Yellow</button>
8  <button type="button" class="text-white bg-gradient-to-r from-teal-500 via-teal-600 to-teal-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-teal-300 dark:focus:ring-teal-800 shadow-lg shadow-teal-500/50 dark:shadow-teal-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Teal</button>
9  <button type="button" class="text-white bg-gradient-to-r from-cyan-500 via-cyan-600 to-cyan-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 shadow-lg shadow-cyan-500/50 dark:shadow-cyan-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Cyan</button>
10  <button type="button" class="text-white bg-gradient-to-r from-amber-500 via-amber-600 to-amber-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-amber-300 dark:focus:ring-amber-800 shadow-lg shadow-amber-500/50 dark:shadow-amber-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Amber</button>

Click Me Effects

Engage your users with interactive click effects that provide instant visual feedback. These buttons deliver smooth animations to enhance the overall user experience.

1<div class="flex flex-wrap items-center justify-start gap-4 p-6 bg-white text-neutral-900 dark:bg-neutral-900 dark:text-neutral-200">
2
3  <!-- 1) Simple button with scale on active -->
4  <button
5    class="inline-flex h-12 items-center justify-center rounded-md
6           bg-neutral-800 px-6 font-medium text-neutral-100 transition
7           active:scale-110
8           dark:bg-neutral-200 dark:text-neutral-900">
9    Click me
10  </button>

Hover Effects

Our hover effect buttons come to life on mouseover, offering smooth transitions and captivating animations that draw attention and boost interactivity.

Button TextButton TextClick MeClick MeClick Me
1<div class="flex flex-wrap gap-4 justify-center items-center p-4 bg-white dark:bg-gray-900">
2
3  <button class="group relative h-12 overflow-hidden rounded-md bg-gray-800 dark:bg-gray-200 px-8 py-2 text-white dark:text-gray-800"><span class="relative z-10">Hover Me</span><span class="absolute inset-0 overflow-hidden rounded-md"><span class="absolute left-0 aspect-square w-full origin-center -translate-x-full rounded-full bg-red-500 transition-all duration-500 group-hover:translate-x-0 group-hover:scale-150"></span></span></button>
4  <button class="group relative h-12 overflow-hidden rounded-md bg-gray-800 dark:bg-gray-200 px-8 py-2 text-white dark:text-gray-800"><span class="relative z-10">Hover Me</span><span class="absolute inset-0 overflow-hidden rounded-md"><span class="absolute right-0 aspect-square w-full origin-center translate-x-full rounded-full bg-green-500 transition-all duration-500 group-hover:translate-x-0 group-hover:scale-150"></span></span></button>
5  <button class="group relative h-12 overflow-hidden rounded-md bg-gray-800 dark:bg-gray-200 px-8 py-2 text-white dark:text-gray-800"><span class="relative z-10">Hover Me</span><span class="absolute inset-0 overflow-hidden rounded-md"><span class="absolute top-0 aspect-square w-full origin-center -translate-y-full rounded-full bg-purple-500 transition-all duration-500 group-hover:translate-y-0 group-hover:scale-150"></span></span></button>
6  <button class="group relative h-12 overflow-hidden rounded-md bg-gray-800 dark:bg-gray-200 px-8 py-2 text-white dark:text-gray-800"><span class="relative z-10">Hover Me</span><span class="absolute inset-0 overflow-hidden rounded-md"><span class="absolute bottom-0 aspect-square w-full origin-center translate-y-full rounded-full bg-orange-500 transition-all duration-500 group-hover:translate-y-0 group-hover:scale-150"></span></span></button>
7  <button class="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-neutral-900 px-6 font-medium text-neutral-200 transition-all duration-300 hover:scale-105 dark:bg-neutral-100 dark:text-neutral-900"><span class="relative z-10">Hover me</span><div class="absolute inset-0 flex h-full w-full justify-center [transform:skew(-12deg)_translateX(-100%)] transition-all duration-700 ease-in-out group-hover:[transform:skew(-12deg)_translateX(100%)]"><div class="relative h-full w-10 bg-white/20 dark:bg-black/20"></div></div></button>
8  <button class="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-neutral-900 px-6 font-medium text-neutral-200 transition-all duration-500 hover:scale-105 dark:bg-neutral-100 dark:text-neutral-900"><div class="translate-x-0 opacity-100 transition-all duration-500 group-hover:-translate-x-[150%] group-hover:opacity-0">Hover me</div><div class="absolute translate-x-[150%] opacity-0 transition-all duration-500 group-hover:translate-x-0 group-hover:opacity-100 flex items-center gap-2"><span class="text-sm font-medium">Go</span><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></button>
9  <button class="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md border border-neutral-300 bg-transparent px-6 font-medium text-neutral-700 transition-all duration-300 shadow-[5px_5px_0px_#525252] hover:shadow-[0px_0px_0px_#525252] hover:translate-x-[3px] hover:translate-y-[3px] dark:border-neutral-600 dark:text-neutral-300 dark:shadow-[5px_5px_0px_#333] dark:hover:shadow-[0px_0px_0px_#333]">Hover me</button>
10  <a href="#_" class="relative inline-block text-lg group"><span class="relative z-10 block px-5 py-3 overflow-hidden font-medium leading-tight text-gray-800 transition-all duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white dark:text-gray-200 dark:border-gray-200"><span class="absolute inset-0 w-full h-full px-5 py-3 rounded-lg bg-gray-50 dark:bg-gray-900 transition-all duration-300"></span><span class="absolute left-0 w-48 h-48 -ml-2 transition-all duration-300 origin-top-right -rotate-90 -translate-x-full translate-y-12 bg-gray-900 dark:bg-gray-100 group-hover:-rotate-180 ease"></span><span class="relative z-10 dark:hover:text-gray-800">Button Text</span></span><span class="absolute bottom-0 right-0 w-full h-12 -mb-1 -mr-1 transition-all duration-300 ease-linear bg-gray-900 dark:bg-gray-100 dark:hover:text-gray-900 rounded-lg group-hover:mb-0 group-hover:mr-0"></span></a>

Social Buttons

Designed for seamless integration with social platforms, these buttons combine stylish icons and responsive layouts to encourage sharing and connectivity.

1 <!-- 1) Facebook -->
2<button type="button" class="text-white bg-[#3b5998] hover:bg-[#3b5998]/90 focus:ring-4 focus:outline-none focus:ring-[#3b5998]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-[#3b5998]/55 me-2 mb-2">
3  <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 8 19">
4    <path fill-rule="evenodd" d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z" clip-rule="evenodd"/>
5  </svg>
6  Sign in with Facebook
7</button>
8
9<!-- 2) Twitter -->
10<button type="button" class="text-white bg-[#1da1f2] hover:bg-[#1da1f2]/90 focus:ring-4 focus:outline-none focus:ring-[#1da1f2]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-[#1da1f2]/55 me-2 mb-2">

Size Buttons

Choose from various button sizes to perfectly match your design requirements. These buttons maintain clarity and accessibility across all devices.

1<div class="flex flex-wrap gap-4 justify-center items-center p-4 bg-white dark:bg-gray-900">
2  <!-- Extra Small (xs) -->
3  <button class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1 text-center dark:focus:ring-blue-800">
4    Extra Small
5  </button>
6
7  <!-- Small (sm) -->
8  <button class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-1.5 text-center dark:focus:ring-blue-800">
9    Small
10  </button>

Button With Icons

Enhance functionality with buttons that integrate icons alongside text. This design improves navigation and provides clear visual cues.

1 <div class="flex flex-wrap gap-4 justify-center items-center p-4 bg-white dark:bg-gray-900">
2
3   <button class="flex items-center gap-2 text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:focus:ring-blue-800">
4    <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
5      <path d="M10 0a10 10 0 1 0 0 20A10 10 0 0 0 10 0zm1 15H9V9h2v6zm0-8H9V5h2v2z"/>
6    </svg>
7    Info
8  </button>
9
10   <button class="flex items-center gap-2 text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:focus:ring-blue-800">

Loading Button

Loading buttons offer animated feedback during asynchronous operations, keeping users informed and engaged while content is being processed.

1<div class="flex flex-wrap gap-4 justify-center items-center p-4 bg-white dark:bg-gray-900">
2
3  <!-- Button with Left Loading Spinner -->
4  <button class="flex items-center gap-2 text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-800">
5    <svg class="w-5 h-5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
6      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
7      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
8    </svg>
9    Loading...
10  </button>

Disabled Button

Disabled buttons are styled to clearly indicate inactivity, using reduced opacity and visual cues that maintain overall design consistency.

1<div class="flex flex-wrap gap-4 justify-center items-center p-4 bg-white dark:bg-gray-900">
2
3  <!-- Solid Disabled Button -->
4  <button disabled class="text-white bg-blue-500 cursor-not-allowed opacity-50 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
5    Disabled
6  </button>
7
8  <!-- Outline Disabled Button -->
9  <button disabled class="text-blue-500 border border-blue-500 cursor-not-allowed opacity-50 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:border-blue-400 dark:text-blue-400">
10    Disabled Outline

Stylish Square Button

This is Stylish Square Button with SVG Icon in it.

1<div class="m-2 flex flex-wrap gap-6 justify-center items-center p-5">
2      <button
3        href="#"
4        class="cyber-button-blue group hover:shadow-neon relative overflow-hidden px-8 py-4 font-bold text-white transition-all duration-300"
5      >
6        <span class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-blue-600 opacity-80"></span>
7        <span class="relative z-10 flex items-center gap-3">
8          <svg
9            class="h-5 w-5"
10            fill="none"
BadgeCard