Tailwind CSS Button Examples
Primary, outline, icon and gradient buttons — plus the same set restyled in 10 design aesthetics. Preview each one live and copy the HTML or JSX.
44 components · live preview · copy as HTML or JSX · free for commercial use
Base buttons (4)
Primary Button
Buttons
<button class="px-4 py-2 rounded-xl bg-indigo-600 text-white text-sm font-semibold hover:bg-indigo-700 transition-colors shadow-sm">
Primary Button
</button>Outline Button
Buttons
<button class="px-4 py-2 rounded-xl border border-slate-300 text-slate-700 text-sm font-semibold hover:bg-slate-50 transition-colors">
Outline Button
</button>Icon Button
Buttons
<button class="w-10 h-10 flex items-center justify-center rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 transition-colors" aria-label="Settings">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>Gradient Button
Buttons
<button class="px-5 py-2.5 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-500 text-white text-sm font-semibold hover:opacity-90 transition-opacity shadow-md">
Get Started
</button>Minimal buttons
Primary Button
Minimal · Buttons
<button class="bg-slate-900 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-slate-800 transition-all">
Primary Button
</button>Outline Button
Minimal · Buttons
<button class="bg-transparent text-slate-900 border border-slate-200 rounded-lg px-4 py-2 text-sm font-medium transition-colors">
Outline Button
</button>Icon Button
Minimal · Buttons
<button class="w-10 h-10 flex items-center justify-center rounded-full bg-white border border-slate-200 text-slate-900 transition-colors" aria-label="Settings">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>Accent Button
Minimal · Buttons
<button class="bg-slate-100 text-slate-700 rounded-full px-5 py-2.5 text-sm font-semibold transition-all">
Get Started
</button>Neumorphism buttons
Primary Button
Neumorphism · Buttons
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<button class="bg-[#e0e5ec] text-slate-600 rounded-xl px-4 py-2 text-sm font-bold hover:shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff] shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff] transition-all">
Primary Button
</button>
</div>Outline Button
Neumorphism · Buttons
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<button class="bg-transparent text-slate-600 rounded-xl px-4 py-2 text-sm font-semibold transition-colors">
Outline Button
</button>
</div>Icon Button
Neumorphism · Buttons
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<button class="w-10 h-10 flex items-center justify-center rounded-full bg-[#e0e5ec] text-slate-600 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff] transition-colors" aria-label="Settings">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
</div>Accent Button
Neumorphism · Buttons
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<button class="bg-[#e0e5ec] text-slate-600 rounded-full px-5 py-2.5 text-sm font-bold shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff] transition-all">
Get Started
</button>
</div>Glassmorphism buttons
Primary Button
Glassmorphism · Buttons
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<button class="bg-white/20 backdrop-blur-md text-white rounded-xl px-4 py-2 text-sm font-bold hover:bg-white/30 shadow-lg transition-all">
Primary Button
</button>
</div>Outline Button
Glassmorphism · Buttons
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<button class="bg-transparent text-white border border-white/30 rounded-xl px-4 py-2 text-sm font-semibold transition-colors">
Outline Button
</button>
</div>Icon Button
Glassmorphism · Buttons
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<button class="w-10 h-10 flex items-center justify-center rounded-full bg-white/20 backdrop-blur-md border border-white/30 text-white shadow-lg transition-colors" aria-label="Settings">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
</div>Accent Button
Glassmorphism · Buttons
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<button class="bg-white/20 backdrop-blur-md text-white rounded-full px-5 py-2.5 text-sm font-bold shadow-lg transition-all">
Get Started
</button>
</div>Neubrutalism buttons
Primary Button
Neubrutalism · Buttons
<button class="bg-yellow-300 text-black rounded-none px-4 py-2 text-sm font-black hover:shadow-[2px_2px_0px_#000] hover:translate-x-[2px] hover:translate-y-[2px] shadow-[6px_6px_0px_#000] transition-all">
Primary Button
</button>Outline Button
Neubrutalism · Buttons
<button class="bg-transparent text-black border-[3px] border-black rounded-none px-4 py-2 text-sm font-black transition-colors">
Outline Button
</button>Icon Button
Neubrutalism · Buttons
<button class="w-10 h-10 flex items-center justify-center rounded-none bg-white border-[3px] border-black text-black shadow-[6px_6px_0px_#000] transition-colors" aria-label="Settings">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>Accent Button
Neubrutalism · Buttons
<button class="bg-pink-400 text-black rounded-none px-5 py-2.5 text-sm font-black shadow-[6px_6px_0px_#000] transition-all">
Get Started
</button>Material buttons
Primary Button
Material · Buttons
<button class="bg-blue-600 text-white rounded-lg px-4 py-2 text-sm font-medium hover:shadow-lg shadow-md transition-all">
Primary Button
</button>Outline Button
Material · Buttons
<button class="bg-transparent text-slate-900 rounded-lg px-4 py-2 text-sm font-medium transition-colors">
Outline Button
</button>Icon Button
Material · Buttons
<button class="w-10 h-10 flex items-center justify-center rounded-full bg-white text-slate-900 shadow-md transition-colors" aria-label="Settings">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>Accent Button
Material · Buttons
<button class="bg-blue-100 text-blue-800 rounded-full px-5 py-2.5 text-sm font-medium shadow-md transition-all">
Get Started
</button>Gradient buttons
Primary Button
Gradient · Buttons
<button class="bg-gradient-to-r from-fuchsia-500 via-purple-500 to-indigo-500 text-white rounded-xl px-4 py-2 text-sm font-bold hover:scale-105 shadow-lg shadow-purple-500/40 transition-all">
Primary Button
</button>Outline Button
Gradient · Buttons
<button class="bg-transparent text-white rounded-xl px-4 py-2 text-sm font-bold transition-colors">
Outline Button
</button>Icon Button
Gradient · Buttons
<button class="w-10 h-10 flex items-center justify-center rounded-full bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500 text-white shadow-lg shadow-purple-500/40 transition-colors" aria-label="Settings">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>Accent Button
Gradient · Buttons
<button class="bg-gradient-to-r from-fuchsia-500 to-indigo-500 text-white rounded-full px-5 py-2.5 text-sm font-bold shadow-lg shadow-purple-500/40 transition-all">
Get Started
</button>Cyberpunk buttons
Primary Button
Cyberpunk · Buttons
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<button class="bg-slate-900 text-cyan-400 rounded-lg px-4 py-2 text-sm font-bold hover:shadow-[0_0_25px_rgba(34,211,238,0.9)] shadow-[0_0_15px_rgba(34,211,238,0.6)] transition-all">
Primary Button
</button>
</div>Outline Button
Cyberpunk · Buttons
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<button class="bg-transparent text-cyan-300 border border-cyan-400 rounded-lg px-4 py-2 text-sm font-semibold transition-colors">
Outline Button
</button>
</div>Icon Button
Cyberpunk · Buttons
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<button class="w-10 h-10 flex items-center justify-center rounded-lg bg-slate-900 border border-cyan-400 text-cyan-300 shadow-[0_0_15px_rgba(34,211,238,0.6)] transition-colors" aria-label="Settings">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
</div>Accent Button
Cyberpunk · Buttons
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<button class="bg-slate-900 text-cyan-400 rounded-lg px-5 py-2.5 text-sm font-bold shadow-[0_0_15px_rgba(34,211,238,0.6)] transition-all">
Get Started
</button>
</div>Retro buttons
Primary Button
Retro · Buttons
<button class="bg-gradient-to-b from-lime-300 to-lime-500 text-slate-900 rounded-2xl px-4 py-2 text-sm font-black active:translate-y-1 active:shadow-none transition-all">
Primary Button
</button>Outline Button
Retro · Buttons
<button class="bg-transparent text-orange-700 border-4 border-orange-400 rounded-2xl px-4 py-2 text-sm font-extrabold transition-colors">
Outline Button
</button>Icon Button
Retro · Buttons
<button class="w-10 h-10 flex items-center justify-center rounded-full bg-orange-100 border-4 border-orange-400 text-orange-700 transition-colors" aria-label="Settings">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>Accent Button
Retro · Buttons
<button class="bg-gradient-to-b from-yellow-300 to-orange-400 text-slate-900 rounded-full px-5 py-2.5 text-sm font-black transition-all">
Get Started
</button>Corporate buttons
Primary Button
Corporate · Buttons
<button class="bg-slate-800 text-white rounded-md px-4 py-2 text-sm font-semibold hover:bg-slate-700 shadow-sm transition-all">
Primary Button
</button>Outline Button
Corporate · Buttons
<button class="bg-transparent text-slate-800 border border-slate-200 rounded-md px-4 py-2 text-sm font-semibold transition-colors">
Outline Button
</button>Icon Button
Corporate · Buttons
<button class="w-10 h-10 flex items-center justify-center rounded-md bg-white border border-slate-200 text-slate-800 shadow-sm transition-colors" aria-label="Settings">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>Accent Button
Corporate · Buttons
<button class="bg-slate-100 text-slate-600 rounded-md px-5 py-2.5 text-sm font-semibold shadow-sm transition-all">
Get Started
</button>Playful buttons
Primary Button
Playful · Buttons
<button class="bg-pink-200 text-pink-900 rounded-3xl px-4 py-2 text-sm font-bold hover:bg-pink-300 transition-all">
Primary Button
</button>Outline Button
Playful · Buttons
<button class="bg-transparent text-yellow-800 border-2 border-yellow-200 rounded-3xl px-4 py-2 text-sm font-bold transition-colors">
Outline Button
</button>Icon Button
Playful · Buttons
<button class="w-10 h-10 flex items-center justify-center rounded-full bg-yellow-50 border-2 border-yellow-200 text-yellow-800 transition-colors" aria-label="Settings">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>Accent Button
Playful · Buttons
<button class="bg-teal-100 text-teal-800 rounded-full px-5 py-2.5 text-sm font-bold transition-all">
Get Started
</button>Choosing the right button
Most interfaces need only a small button hierarchy. Use one primary button for the main action on a screen — Save, Sign up, Checkout — and an outline button for alternatives such as Cancel or Back. Gradient buttons work best as a single hero call to action; repeating them dilutes their pull. Icon-only buttons are compact and suit toolbars, but they must carry an aria-label because there is no visible text for screen readers.
Keep sizing consistent: the examples use px-4 py-2 with text-sm, which gives a comfortable target on desktop. On touch screens aim for at least 44×44 px, either by increasing the padding or adding min-h-11.
Accessibility checklist
Use a real <button> element for actions and an <a> for navigation, so keyboard and assistive-technology users get the right behavior for free. Keep a visible focus style — if you remove the default outline, add focus-visible:ring-2 back. Check that label text meets WCAG AA contrast (4.5:1) against the button background, especially on gradient and colored variants.
Frequently Asked Questions
How do I make a Tailwind button full width?↓
Add w-full to the button's class list. In a flex row, use flex-1 instead so several buttons share the available width evenly.
Should I use a button or a link?↓
Use <button> when the click performs an action on the current page, such as submitting a form or opening a modal. Use <a href> when it navigates to another URL. Styling either one to look like a button is fine; the element you choose is what matters for accessibility.
How do I add a loading state to a button?↓
Disable the button while the request runs (disabled plus disabled:opacity-60) and swap the label for a spinner such as the animate-spin spinner in the Feedback category. Keep the button width stable so the layout does not jump.
Last updated: