Snippets · Tailwind CSS
Tailwind Button Presets
A copy-paste collection of ready-made button styles built entirely with Tailwind utility classes. Click a preset to copy its class string, then drop it onto any button element in your markup.
Primary
Solid accent fill for the main call-to-action on a page.
inline-flex items-center justify-center gap-2 rounded-lg bg-accent px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-accent/90 focus:outline-none focus:ring-2 focus:ring-accent/40Secondary
Dark, neutral solid for supporting actions alongside a primary button.
inline-flex items-center justify-center gap-2 rounded-lg bg-zinc-800 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-500Outline
Bordered and minimal — sits quietly on any surface or background.
inline-flex items-center justify-center gap-2 rounded-lg border border-zinc-400 px-5 py-2.5 text-sm font-semibold text-zinc-800 transition-colors hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-400 dark:border-white/30 dark:text-zinc-100 dark:hover:bg-white/10Ghost
No background or border; an understated inline action.
inline-flex items-center justify-center gap-2 rounded-lg px-5 py-2.5 text-sm font-semibold text-zinc-700 transition-colors hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-400 dark:text-zinc-300 dark:hover:bg-white/10Gradient
Violet-to-fuchsia gradient sweep for high-impact moments.
inline-flex items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-violet-600 to-fuchsia-500 px-5 py-2.5 text-sm font-semibold text-white transition-opacity hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-fuchsia-400Glass
Frosted translucent panel with backdrop blur, built for overlays and hero images.
inline-flex items-center justify-center gap-2 rounded-lg border border-white/20 bg-white/10 px-5 py-2.5 text-sm font-semibold text-white backdrop-blur-md transition-colors hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white/30Neon
Cyan glow with an outer shadow, straight out of a cyberpunk terminal.
inline-flex items-center justify-center gap-2 rounded-lg border border-cyan-400/60 bg-cyan-400/10 px-5 py-2.5 text-sm font-semibold text-cyan-300 shadow-[0_0_15px_rgba(34,211,238,0.35)] transition-shadow hover:shadow-[0_0_30px_rgba(34,211,238,0.6)] focus:outline-none focus:ring-2 focus:ring-cyan-400Pill
Fully rounded capsule shape for a soft, friendly CTA.
inline-flex items-center justify-center gap-2 rounded-full bg-accent px-6 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-accent/90 focus:outline-none focus:ring-2 focus:ring-accent/40Soft
Subtle accent tint background — a quiet alternative to primary.
inline-flex items-center justify-center gap-2 rounded-lg bg-accent/10 px-5 py-2.5 text-sm font-semibold text-accent transition-colors hover:bg-accent/20 focus:outline-none focus:ring-2 focus:ring-accent/40Destructive
Solid red for delete, reset, and other destructive actions.
inline-flex items-center justify-center gap-2 rounded-lg bg-red-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-400