~/css/tailwind-buttons

6 Tailwind Buttons

5 Tailwind1 with JSPublished 2026-10-04Free · no sign-up

Six button sets in Tailwind: primary, secondary, outline, ghost and danger variants, a gradient glow call to action, buttons with icons, a loading state, a size scale and pill buttons for dark interfaces.

Filter demos

01. Tailwind Button Variants

TailwindButtons

The core button set for any interface: primary, secondary, outline, ghost and danger, sharing size and radius utilities. Every variant has hover and focus-visible states, and the danger button keeps strong contrast for its white text.

View code

<div class="flex flex-wrap gap-2.5 text-sm font-semibold">
  <button class="rounded-lg bg-blue-600 px-4 py-2.5 text-white hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">Primary</button>
  <button class="rounded-lg bg-slate-900 px-4 py-2.5 text-white hover:bg-slate-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900">Secondary</button>
  <button class="rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-slate-900 hover:bg-slate-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">Outline</button>
  <button class="rounded-lg px-4 py-2.5 text-slate-700 hover:bg-slate-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600">Ghost</button>
  <button class="rounded-lg bg-red-600 px-4 py-2.5 text-white hover:bg-red-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">Delete</button>
</div>

02. Tailwind Gradient Glow Button

TailwindGradient

A call-to-action button with a gradient fill, a coloured glow from shadow utilities and a slight lift on hover. hover:-translate-y-0.5 adds the lift and motion-reduce:transform-none removes it for people who prefer less motion.

View code

<button class="rounded-xl bg-gradient-to-r from-fuchsia-500 to-indigo-500 px-6 py-3 font-bold text-white shadow-lg shadow-fuchsia-500/30 transition hover:-translate-y-0.5 hover:shadow-xl hover:shadow-fuchsia-500/40 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-fuchsia-300 motion-reduce:transform-none">Get early access</button>

03. Tailwind Buttons with Icons

TailwindIcon

Buttons with a leading icon, a trailing arrow and an icon-only version. Icons are aria-hidden SVGs that inherit currentColor, and the icon-only button carries an aria-label so its purpose is announced.

View code

<div class="flex flex-wrap items-center gap-2.5 text-sm font-semibold">
  <button class="inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-4 py-2.5 text-white hover:bg-emerald-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>New product</button>
  <button class="inline-flex items-center gap-2 rounded-lg border border-slate-300 px-4 py-2.5 text-slate-900 hover:bg-slate-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600">Continue<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button>
  <button aria-label="Download report" class="grid h-10 w-10 place-items-center rounded-lg border border-slate-300 text-slate-700 hover:bg-slate-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" aria-hidden="true"><path d="M12 4v11M7 10l5 5 5-5M5 20h14"/></svg></button>
</div>

04. Tailwind Loading Button

TailwindState

A Save button that shows a spinner and Saving... while working, then returns. It sets aria-busy and disables itself during the wait, and the spinner uses animate-spin with motion-reduce:animate-none for reduced motion.

View code

<button id="twlb" class="inline-flex items-center gap-2 rounded-lg bg-sky-500 px-5 py-2.5 font-bold text-sky-950 hover:bg-sky-400 disabled:cursor-wait disabled:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300">
  <svg class="hidden h-4 w-4 animate-spin motion-reduce:animate-none" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" opacity=".3"/><path d="M21 12a9 9 0 00-9-9" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg><span>Save changes</span>
</button>

const lb = document.getElementById('twlb');
lb.addEventListener('click', () => {
  lb.disabled = true; lb.setAttribute('aria-busy', 'true'); lb.querySelector('svg').classList.remove('hidden'); lb.querySelector('span').textContent = 'Saving...';
  setTimeout(() => { lb.disabled = false; lb.removeAttribute('aria-busy'); lb.querySelector('svg').classList.add('hidden'); lb.querySelector('span').textContent = 'Saved'; }, 1600);
});

05. Tailwind Button Sizes

TailwindSizes

Extra small to large buttons from padding and text-size utilities, with the smallest still at least 32 pixels tall for touch. Lining up the sizes shows how padding and font size scale together to keep proportions.

View code

<div class="flex flex-wrap items-center gap-2.5 font-semibold">
  <button class="rounded-md bg-violet-600 px-2.5 py-1.5 text-xs text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600">Extra small</button>
  <button class="rounded-lg bg-violet-600 px-3.5 py-2 text-sm text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600">Small</button>
  <button class="rounded-lg bg-violet-600 px-4 py-2.5 text-sm text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600">Medium</button>
  <button class="rounded-xl bg-violet-600 px-5 py-3 text-base text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600">Large</button>
</div>

06. Tailwind Pill and Outline Buttons

TailwindOutline

Rounded pill buttons for dark interfaces: a solid white pill, an outlined pill that fills on hover and a soft tinted pill. The outline pill animates its background with transition-colors for a gentle hover.

View code

<div class="flex flex-wrap gap-3 text-sm font-bold">
  <button class="rounded-full bg-white px-5 py-2.5 text-slate-900 hover:bg-slate-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Join now</button>
  <button class="rounded-full border-2 border-white px-5 py-2 text-white transition-colors hover:bg-white hover:text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Learn more</button>
  <button class="rounded-full bg-amber-400/15 px-5 py-2.5 text-amber-300 hover:bg-amber-400/25 focus-visible:outline focus-visible:outline-2 focus-visible:outline-amber-300">Beta</button>
</div>

About these Tailwind Buttons

One base, many variants

Keep padding, radius and font utilities the same across variants and change only colours, so buttons look like one family.

Focus-visible rings

focus-visible:outline-2 with an offset shows a clear ring for keyboard users only. Never remove focus styles without replacing them.

Loading states

Disable the button and set aria-busy while work runs, show a spinner with animate-spin, and use motion-reduce:animate-none for reduced motion.

Icon-only buttons

Give them an aria-label and a size of at least 40 pixels, as in the download button.

Frequently asked questions

Which demo uses JavaScript?

Only the loading button.

How do I add a brand colour?

Replace blue with your theme colour, or define a brand colour in your Tailwind config.

Is there a CSS version?

Yes, see the CSS buttons collection.